Kemas M. Aryadary Rasyad
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { useNavigate, useParams } from "react-router-dom";
|
|
import type { InternTaskItem } from "../../../../types/project.types";
|
|
|
|
const formatDate = (date: string) =>
|
|
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
|
|
|
const formatTime = (dateStr: string) =>
|
|
new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
|
|
|
|
export default function MentorTaskCard({ task }: {task: InternTaskItem}) {
|
|
const navigate = useNavigate();
|
|
const { slug } = useParams<{ slug: string }>();
|
|
|
|
const handleCardClick = () => {
|
|
navigate(`/mentor/projects/${slug}/${task.slug}?type=${task.submission_type}`)
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="border border-card-outline rounded-[10px] px-5 py-4 mb-3 bg-card shadow-lg flex items-start justify-between gap-3 cursor-pointer hover:border-card-outline/50 transition-colors"
|
|
onClick={handleCardClick}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-[11px] text-[#888] mb-1">
|
|
Deadline : {task.deadline_at ? `${formatDate(task.deadline_at)} at ${formatTime(task.deadline_at)}` : '-'}
|
|
</div>
|
|
<div className="font-bold text-[15px] text-[#1a1a1a] mb-1">
|
|
{task.title}
|
|
</div>
|
|
<div className="text-[13px] text-[#666]">
|
|
{task.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |