53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { WorkItem, WorkItemStatus } from '@/lib/types';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faCheck } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
interface WorkItemCardProps {
|
|
item: WorkItem;
|
|
showCheckbox?: boolean;
|
|
onToggle?: (id: number) => void;
|
|
selected?: boolean;
|
|
}
|
|
|
|
export default function WorkItemCard({
|
|
item,
|
|
showCheckbox = false,
|
|
onToggle,
|
|
selected = false
|
|
}: WorkItemCardProps) {
|
|
return (
|
|
<div className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-200">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
{showCheckbox && (
|
|
<button
|
|
onClick={() => onToggle?.(item.id)}
|
|
className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors duration-200 ${
|
|
selected
|
|
? 'bg-blue-500 border-blue-500 text-white'
|
|
: 'border-gray-300 hover:border-blue-400'
|
|
}`}
|
|
>
|
|
{selected && <FontAwesomeIcon icon={faCheck} className="h-3 w-3" />}
|
|
</button>
|
|
)}
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-900">{item.title}</h3>
|
|
</div>
|
|
</div>
|
|
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
|
item.status === WorkItemStatus.Pending
|
|
? 'bg-yellow-100 text-yellow-800'
|
|
: item.status === WorkItemStatus.InProgress
|
|
? 'bg-blue-100 text-blue-800'
|
|
: 'bg-green-100 text-green-800'
|
|
}`}>
|
|
{item.status === WorkItemStatus.Pending ? 'Pending' :
|
|
item.status === WorkItemStatus.InProgress ? 'In Progress' : 'Completed'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |