"use client" /** * @name List View 06 * @description A kanban-style horizontal scrolling list with status columns. * Great for task boards, workflow management, or project tracking. * * @slots list-view, list-view-container, list-view-header, list-view-heading, * list-view-add-button, list-view-columns, list-view-column, list-view-column-header, * list-view-column-title, list-view-column-count, list-view-column-content, * list-view-card, list-view-card-priority, list-view-card-title, list-view-card-description, * list-view-card-footer, list-view-card-assignee, list-view-card-due * @variant kanban * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Plus } from "lucide-react" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type Priority = "low" | "medium" | "high" type ColumnStatus = "todo" | "in-progress" | "review" | "done" interface KanbanCard { id: string title: string description?: string priority?: Priority assignee?: string dueDate?: string status: ColumnStatus } interface KanbanColumn { id: string status: ColumnStatus title: string } interface ListView06Props { heading?: string columns?: KanbanColumn[] cards?: KanbanCard[] onAddClick?: (status: ColumnStatus) => void onCardClick?: (id: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultColumns: KanbanColumn[] = [ { id: "col-1", status: "todo", title: "To Do" }, { id: "col-2", status: "in-progress", title: "In Progress" }, { id: "col-3", status: "review", title: "Review" }, { id: "col-4", status: "done", title: "Done" }, ] const defaultCards: KanbanCard[] = [ { id: "card-1", title: "Design system updates", description: "Update color tokens and spacing", priority: "high", assignee: "Sarah", status: "todo", dueDate: "Dec 20" }, { id: "card-2", title: "User research interviews", description: "5 sessions scheduled", priority: "medium", assignee: "Mike", status: "todo", dueDate: "Dec 22" }, { id: "card-3", title: "API integration", priority: "high", assignee: "Alex", status: "in-progress", dueDate: "Dec 18" }, { id: "card-4", title: "Mobile responsive fixes", description: "Fix header and footer", priority: "medium", assignee: "Emma", status: "in-progress" }, { id: "card-5", title: "Performance audit", priority: "low", assignee: "David", status: "review" }, { id: "card-6", title: "Landing page redesign", description: "Hero section complete", priority: "high", assignee: "Lisa", status: "done" }, { id: "card-7", title: "Bug fix: Login flow", priority: "high", status: "done" }, ] const priorityColors: Record = { low: "bg-green-500", medium: "bg-amber-500", high: "bg-red-500", } // ============================================================================ // COMPONENT // ============================================================================ function ListView06({ heading = "Project Board", columns = defaultColumns, cards = defaultCards, onAddClick, onCardClick, className, idBase = "list-view-06", }: ListView06Props) { const headingId = `${idBase}-heading` const getColumnCards = (status: ColumnStatus) => cards.filter((card) => card.status === status) return (

{/* Header */}

{heading}

{/* Columns */}

{columns.map((column) => { const columnCards = getColumnCards(column.status) return (

{/* Column Header */}

{column.title}

{columnCards.length}

{/* Column Content */}

{columnCards.map((card) => (

onCardClick?.(card.id)} > {/* Priority */} {card.priority && (

)} {/* Title */}

{card.title}

{/* Description */} {card.description && (

{card.description}

)} {/* Footer */} {(card.assignee || card.dueDate) && (

{card.assignee && (

{card.assignee}

)} {card.dueDate && ( {card.dueDate} )}

)}

))}

) })}

) } export default ListView06 export { ListView06, type ListView06Props }