56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"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>
|
|
)
|
|
}
|