"use client" /** * @name List View 04 * @description A grouped list view with collapsible sections organized by category. * Perfect for file browsers and hierarchical content organization. * * @slots list-view, list-view-container, list-view-header, list-view-heading, * list-view-description, list-view-body, list-view-group, list-view-group-header, * list-view-group-toggle, list-view-group-title, list-view-group-count, * list-view-group-items, list-view-item, list-view-item-icon, list-view-item-content, * list-view-item-title, list-view-item-description, list-view-item-meta, * list-view-item-action * @variant grouped * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { ChevronDown, ChevronRight, File, Folder, Image, Video, ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ListItem { id: string title: string description: string type: "document" | "folder" | "image" | "video" size: string date: string } interface ListGroup { id: string title: string items: ListItem[] } interface ListView04Props { heading?: string description?: string groups?: ListGroup[] onItemClick?: (id: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultGroups: ListGroup[] = [ { id: "grp-recent", title: "Recent", items: [ { id: "item-1", title: "Project Proposal.docx", description: "Updated 2 hours ago", type: "document", size: "2.4 MB", date: "Today" }, { id: "item-2", title: "Design Assets", description: "Contains 24 items", type: "folder", size: "156 MB", date: "Today" }, ], }, { id: "grp-documents", title: "Documents", items: [ { id: "item-3", title: "Q4 Report.pdf", description: "Financial summary", type: "document", size: "1.2 MB", date: "Dec 15" }, { id: "item-4", title: "Meeting Notes.md", description: "Team standup notes", type: "document", size: "45 KB", date: "Dec 14" }, { id: "item-5", title: "API Documentation", description: "Contains 12 items", type: "folder", size: "8.3 MB", date: "Dec 10" }, ], }, { id: "grp-media", title: "Media", items: [ { id: "item-6", title: "Product Demo.mp4", description: "Product walkthrough video", type: "video", size: "245 MB", date: "Dec 8" }, { id: "item-7", title: "Team Photo.jpg", description: "Annual team photo", type: "image", size: "4.5 MB", date: "Dec 5" }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function ListView04({ heading = "Files", description = "Browse your files organized by category", groups = defaultGroups, onItemClick, className, idBase = "list-view-04", }: ListView04Props) { const [expandedGroups, setExpandedGroups] = React.useState>( new Set(groups.map((g) => g.id)) ) const headingId = `${idBase}-heading` const toggleGroup = (id: string) => { setExpandedGroups((prev) => { const next = new Set(prev) if (next.has(id)) { next.delete(id) } else { next.add(id) } return next }) } const getIcon = (type: ListItem["type"]) => { switch (type) { case "folder": return case "image": return case "video": return