40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { TaskCard } from './TaskCard';
|
|
import type { KanbanColumn as KanbanColumnType } from '@/types/kanban';
|
|
|
|
interface KanbanColumnProps {
|
|
column: KanbanColumnType;
|
|
}
|
|
|
|
export function KanbanColumn({ column }: KanbanColumnProps) {
|
|
const statusColors = {
|
|
ToDo: 'border-gray-300',
|
|
InProgress: 'border-blue-300',
|
|
InReview: 'border-yellow-300',
|
|
Done: 'border-green-300',
|
|
Blocked: 'border-red-300',
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-w-[300px] flex-col rounded-lg border-2 bg-muted/50 p-4">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h3 className="font-semibold">{column.title}</h3>
|
|
<span className="rounded-full bg-background px-2 py-0.5 text-xs font-medium">
|
|
{column.tasks.length}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 space-y-3">
|
|
{column.tasks.map((task) => (
|
|
<TaskCard key={task.id} task={task} />
|
|
))}
|
|
{column.tasks.length === 0 && (
|
|
<div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25">
|
|
<p className="text-sm text-muted-foreground">No tasks</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|