47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
import { useSortable } from '@dnd-kit/sortable';
|
||
|
|
import { CSS } from '@dnd-kit/utilities';
|
||
|
|
import { Card as CardType } from '../../types/kanban';
|
||
|
|
|
||
|
|
interface KanbanCardProps {
|
||
|
|
card: CardType;
|
||
|
|
onClick: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function KanbanCard({ card, onClick }: KanbanCardProps) {
|
||
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||
|
|
id: card.id.toString(),
|
||
|
|
});
|
||
|
|
|
||
|
|
const style = {
|
||
|
|
transform: CSS.Transform.toString(transform),
|
||
|
|
transition,
|
||
|
|
opacity: isDragging ? 0.5 : 1,
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={setNodeRef}
|
||
|
|
style={style}
|
||
|
|
{...attributes}
|
||
|
|
{...listeners}
|
||
|
|
onClick={onClick}
|
||
|
|
className="bg-gray-700 rounded-lg p-4 mb-3 cursor-pointer hover:bg-gray-600 transition-colors border border-gray-600 shadow-sm"
|
||
|
|
>
|
||
|
|
<h3 className="text-white font-medium mb-2">{card.name}</h3>
|
||
|
|
|
||
|
|
{card.description && (
|
||
|
|
<p className="text-gray-400 text-sm mb-2 line-clamp-2">{card.description}</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between text-xs text-gray-500">
|
||
|
|
<span>#{card.id_short}</span>
|
||
|
|
{card.due && (
|
||
|
|
<span className={card.due_complete ? 'text-green-400' : 'text-yellow-400'}>
|
||
|
|
Due: {new Date(card.due).toLocaleDateString()}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|