大海
35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import type { Schedule } from "@/types";
|
|
|
|
interface ScheduleCardProps {
|
|
schedule: Schedule;
|
|
onToggle?: () => void;
|
|
}
|
|
|
|
export function ScheduleCard({ schedule, onToggle }: ScheduleCardProps) {
|
|
const typeIcons: Record<string, string> = {
|
|
vaccine: "💉",
|
|
deworming: "💊",
|
|
checkup: "🩺",
|
|
grooming: "✂️",
|
|
};
|
|
|
|
const date = new Date(schedule.scheduledAt);
|
|
const isOverdue = date < new Date() && !schedule.completed;
|
|
|
|
return (
|
|
<div className={`flex items-center gap-3 p-3 rounded-lg border ${schedule.completed ? "bg-gray-50 border-gray-100" : isOverdue ? "bg-red-50 border-red-200" : "bg-white border-gray-100"}`}>
|
|
<span className="text-2xl">{typeIcons[schedule.type] || "📅"}</span>
|
|
<div className="flex-1 min-w-0">
|
|
<p className={`text-sm font-medium ${schedule.completed ? "text-gray-400 line-through" : "text-gray-800"}`}>{schedule.title}</p>
|
|
<p className="text-xs text-gray-500">{date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</p>
|
|
</div>
|
|
<button
|
|
onClick={onToggle}
|
|
className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${schedule.completed ? "bg-green-500 border-green-500" : "border-gray-300"}`}
|
|
>
|
|
{schedule.completed && <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|