4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T26c9,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; interface KanbanCard { assignee?: string; description?: string; id: string; tag?: string; tagVariant?: "default" | "success" | "warning" | "danger"; title: string; } interface KanbanColumn { cards: KanbanCard[]; color?: string; id: string; title: string; } interface KanbanBoardProps extends React.HTMLAttributes { columns: KanbanColumn[]; onCardMove?: ( cardId: string, fromColumn: string, toColumn: string, toIndex: number ) => void; title?: string; } export function KanbanBoard({ columns: externalColumns, title, onCardMove, className, ...props }: KanbanBoardProps) { const [columns, setColumns] = React.useState(externalColumns); React.useEffect(() => setColumns(externalColumns), [externalColumns]); // Drag state const [dragging, setDragging] = React.useState<{ cardId: string; columnId: string; } | null>(null); const [overColumn, setOverColumn] = React.useState(null); const [overCard, setOverCard] = React.useState(null); const tagColors: Record = { danger: "border-red-500/30 bg-red-500/10 text-red-400", default: "border-primary/30 bg-primary/10 text-primary", success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-400", warning: "border-amber-500/30 bg-amber-500/10 text-amber-400", }; function handleDragStart( e: React.DragEvent, cardId: string, columnId: string ) { setDragging({ cardId, columnId }); e.dataTransfer.effectAllowed = "move"; // Make the drag image slightly transparent if (e.currentTarget instanceof HTMLElement) { e.dataTransfer.setDragImage(e.currentTarget, 0, 0); } } function handleDragEnd() { setDragging(null); setOverColumn(null); setOverCard(null); } function handleColumnDragOver(e: React.DragEvent, columnId: string) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setOverColumn(columnId); } function handleCardDragOver(e: React.DragEvent, cardId: string) { e.preventDefault(); e.stopPropagation(); setOverCard(cardId); } function handleDrop(e: React.DragEvent, targetColumnId: string) { e.preventDefault(); if (!dragging) { return; } const { cardId, columnId: sourceColumnId } = dragging; if (sourceColumnId === targetColumnId && !overCard) { handleDragEnd(); return; } setColumns((prev) => { const next = prev.map((col) => ({ ...col, cards: [...col.cards] })); const sourceCol = next.find((c) => c.id === sourceColumnId); const targetCol = next.find((c) => c.id === targetColumnId); if (!(sourceCol && targetCol)) { return prev; } const cardIndex = sourceCol.cards.findIndex((c) => c.id === cardId); if (cardIndex === -1) { return prev; } const [card] = sourceCol.cards.splice(cardIndex, 1); // Find insertion index let insertIndex = targetCol.cards.length; if (overCard) { const overIdx = targetCol.cards.findIndex((c) => c.id === overCard); if (overIdx !== -1) { insertIndex = overIdx; } } targetCol.cards.splice(insertIndex, 0, card); return next; }); const targetCol = columns.find((c) => c.id === targetColumnId); const insertIndex = overCard ? (targetCol?.cards.findIndex((c) => c.id === overCard) ?? targetCol?.cards.length ?? 0) : (targetCol?.cards.length ?? 0); onCardMove?.(cardId, sourceColumnId, targetColumnId, insertIndex); handleDragEnd(); } return (

{/* Scanline */}

{/* Header */} {title ? (

{title}

) : null} {/* Columns */}

{columns.map((column) => (

handleColumnDragOver(e, column.id)} onDragLeave={() => { if (overColumn === column.id) { setOverColumn(null); } }} onDrop={(e) => handleDrop(e, column.id)} > {/* Column header */}

{column.title} {column.cards.length}

{/* Cards */}

{column.cards.map((card) => (

handleDragStart(e, card.id, column.id)} onDragEnd={handleDragEnd} onDragOver={(e) => handleCardDragOver(e, card.id)} onDragLeave={() => { if (overCard === card.id) { setOverCard(null); } }} className={cn( "group relative cursor-grab rounded border border-primary/15 bg-card/80 p-3 transition-all active:cursor-grabbing", "hover:border-primary/30 hover:shadow-[0_0_8px_rgba(var(--primary-rgb,0,180,255),0.06)]", dragging?.cardId === card.id && "scale-95 opacity-40", overCard === card.id && dragging?.cardId !== card.id && "border-t-2 border-t-primary/50" )} > {/* Drag handle */}

{card.title}

{card.description ? (

{card.description}

) : null}

{card.tag ? ( {card.tag} ) : null} {card.assignee ? ( {card.assignee.charAt(0).toUpperCase()} ) : null}

{/* Card corner ticks */}

))}

{/* Corner decorations */}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"src/components/thegridcn/kanban-board.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]