43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
import { useDroppable } from '@dnd-kit/core';
|
||
|
|
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||
|
|
import { ListWithCards, Card as CardType } from '../../types/kanban';
|
||
|
|
import { KanbanCard } from './KanbanCard';
|
||
|
|
|
||
|
|
interface KanbanColumnProps {
|
||
|
|
list: ListWithCards;
|
||
|
|
cards: CardType[];
|
||
|
|
onCardClick: (card: CardType) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function KanbanColumn({ list, cards, onCardClick }: KanbanColumnProps) {
|
||
|
|
const { setNodeRef, isOver } = useDroppable({
|
||
|
|
id: list.id.toString(),
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-gray-800 rounded-lg p-4 min-w-[300px] max-w-[300px] border border-gray-700">
|
||
|
|
<h2 className="text-white font-bold text-lg mb-4 flex items-center justify-between">
|
||
|
|
{list.name}
|
||
|
|
<span className="bg-gray-600 text-gray-300 text-xs px-2 py-1 rounded-full">
|
||
|
|
{cards.length}
|
||
|
|
</span>
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<SortableContext
|
||
|
|
id={list.id.toString()}
|
||
|
|
items={cards.map((card) => card.id.toString())}
|
||
|
|
strategy={verticalListSortingStrategy}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
ref={setNodeRef}
|
||
|
|
className={`min-h-[200px] transition-colors ${isOver ? 'bg-gray-750' : ''}`}
|
||
|
|
>
|
||
|
|
{cards.map((card) => (
|
||
|
|
<KanbanCard key={card.id} card={card} onClick={() => onCardClick(card)} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</SortableContext>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|