Kanban shenanigans

src/components/kanban/KanbanCardModal.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import type { KanbanCardData } from "@/types/kanban"
+
+export interface KanbanCardModalProps {
+  card: KanbanCardData | null
+  onClose: () => void
+}
+
+export function KanbanCardModal({ card, onClose }: KanbanCardModalProps) {
+  return (
+    <Dialog open={!!card} onOpenChange={onClose}>
+      <DialogContent>
+        {card && (
+          <div className="space-y-4">
+            <h3 className="text-xl font-semibold">{card.title}</h3>
+
+            <div className="flex gap-2 flex-wrap">
+              {card.labels?.map((label) => (
+                <span
+                  key={label.id}
+                  className="text-xs px-2 py-1 rounded-full"
+                  style={{ backgroundColor: label.color }}
+                >
+                  {label.name}
+                </span>
+              ))}
+            </div>
+
+            {card.description && (
+              <p className="text-sm text-muted-foreground">{card.description}</p>
+            )}
+
+            {card.todos?.length > 0 && (
+              <div className="space-y-1">
+                {card.todos.map((todo) => (
+                  <div key={todo.id} className="flex items-center gap-2">
+                    <input type="checkbox" checked={todo.done} readOnly />
+                    <span
+                      className={`text-sm ${todo.done ? "line-through text-muted-foreground" : ""
+                        }`}
+                    >
+                      {todo.text}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}