Kemas M. Aryadary Rasyad
46cd26f4d2
- Implemented AddInternsDialog for inviting and managing interns. - Created CreateProjectDialog for launching new projects with detailed forms. - Added CreateTaskDialog for task creation with deadline and submission type options. - Enhanced Header component with navigation functionality. - Updated MentorProjectCard to navigate correctly to mentor projects. - Refactored SidebarMentor for improved navigation and mobile responsiveness. - Adjusted Internify login logic to streamline user role navigation. - Added CSS styles for consistent layout and design. - Introduced mock data for interns to facilitate development and testing.
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
|
|
interface ProjectCardProps {
|
|
id: number | string
|
|
name: string
|
|
mentor: string
|
|
avatarUrl?: string
|
|
thumbnailUrl?: string
|
|
progress: number
|
|
tasksDone: number
|
|
tasksTotal: number
|
|
}
|
|
|
|
const ProjectCard = ({
|
|
id,
|
|
name,
|
|
mentor,
|
|
avatarUrl,
|
|
thumbnailUrl,
|
|
progress,
|
|
tasksDone,
|
|
tasksTotal,
|
|
}: ProjectCardProps) => {
|
|
const navigate = useNavigate()
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 w-[230px] flex flex-col">
|
|
{/* Thumbnail */}
|
|
<div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden">
|
|
{thumbnailUrl && (
|
|
<img src={thumbnailUrl} alt={name} className="w-full h-full object-cover" />
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="min-h-[180px] max-h-[210px] flex-1 flex flex-col justify-between py-3">
|
|
<div className="px-3 flex flex-col gap-2">
|
|
<p className="text-sm font-semibold text-gray-800 leading-tight">{name}</p>
|
|
|
|
{/* Mentor */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-6 h-6 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
|
|
{avatarUrl ? (
|
|
<img src={avatarUrl} alt={mentor} className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full bg-gray-300" />
|
|
)}
|
|
</div>
|
|
<span className="text-xs text-gray-500 truncate">{mentor}</span>
|
|
</div>
|
|
|
|
{/* Progress bar */}
|
|
<div className="flex flex-col gap-1">
|
|
<div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-red-600 rounded-full transition-all duration-300"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-[10px] text-gray-400 text-right">
|
|
{tasksDone}/{tasksTotal}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/* Button */}
|
|
<div className="flex items-end justify-end px-3 pb-1">
|
|
<button
|
|
onClick={() => navigate(`/intern/projects/${id}`)}
|
|
className="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 px-3 rounded-xl transition-colors"
|
|
>
|
|
View Project
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProjectCard |