Spaces:
Sleeping
Sleeping
File size: 1,319 Bytes
01d5a5d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
'use client';
interface TaskCardProps {
task: {
id: string;
description: string;
participants: { name: string }[];
status: 'running' | 'completed' | 'failed';
createdAt: string;
};
onClick: () => void;
}
export default function TaskCard({ task, onClick }: TaskCardProps) {
const statusColors = {
running: 'bg-blue-100 text-blue-800',
completed: 'bg-green-100 text-green-800',
failed: 'bg-red-100 text-red-800'
};
return (
<button
className="w-full text-left border rounded-lg p-4 hover:shadow-md transition-shadow bg-white"
onClick={onClick}
>
<div className="flex justify-between items-start mb-3">
<h3 className="text-lg font-medium line-clamp-2">{task.description}</h3>
<span className={`px-2 py-1 rounded-full text-sm font-medium ${statusColors[task.status]}`}>
{task.status.charAt(0).toUpperCase() + task.status.slice(1)}
</span>
</div>
<div className="text-sm text-gray-500 mb-3">Created {task.createdAt}</div>
<div className="flex flex-wrap gap-2">
{task.participants.map((participant, index) => (
<span key={index} className="px-2 py-1 bg-gray-100 rounded-full text-sm">
{participant.name}
</span>
))}
</div>
</button>
);
}
|