// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name List View 01 * @description A simple list view with items and actions. * Perfect for displaying collections of items with status indicators. * * @slots list-view, list-view-container, list-view-header, list-view-title, * list-view-count, list-view-add-btn, list-view-list, list-view-item, * list-view-item-status, list-view-item-content, list-view-item-title, * list-view-item-description, list-view-item-meta * @variant simple * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { Plus, ChevronRight } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ListItem { /** Unique identifier */ id: string /** Item title */ title: string /** Item description */ description?: string /** Item status */ status?: "active" | "pending" | "completed" | "archived" /** Additional metadata */ meta?: string } interface ListView01Props { /** List title */ title?: string /** Items to display */ items?: ListItem[] /** Show add button */ showAddButton?: boolean /** Callback when item is clicked */ onItemClick?: (id: string) => void /** Callback when add is clicked */ onAdd?: () => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: ListItem[] = [ { id: "1", title: "Project Alpha", description: "Main development project", status: "active", meta: "Updated 2h ago" }, { id: "2", title: "Marketing Campaign", description: "Q1 launch campaign", status: "pending", meta: "Updated 1d ago" }, { id: "3", title: "Bug Fixes", description: "Critical bug fixes for v2.0", status: "completed", meta: "Updated 3d ago" }, { id: "4", title: "Documentation", description: "API documentation update", status: "active", meta: "Updated 5h ago" }, { id: "5", title: "Legacy System", description: "Old system migration", status: "archived", meta: "Updated 1w ago" }, ] const statusColors: Record = { active: "bg-primary", pending: "bg-warning", completed: "bg-primary", archived: "bg-muted-foreground", } // ============================================================================ // COMPONENT // ============================================================================ function ListView01({ title = "Items", items = defaultItems, showAddButton = true, onItemClick, onAdd, className, }: ListView01Props) { return (

{/* Header */}

{title}

{items.length} items

{showAddButton && ( )}

{/* List */}

{items.map((item) => ( ))}

) } export default ListView01 export { ListView01, type ListView01Props, type ListItem }

{title}

{item.title}