Initial commit

components/features/kanban/KanbanColumn.tsx

@@ -0,0 +1,39 @@
+'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>
+  );
+}