"use client" /** * @name Grid View 04 * @description A sortable grid view with drag-and-drop functionality and multi-select support. * Great for reorderable task lists and batch operations on items. * * @slots grid-view, grid-view-container, grid-view-header, grid-view-heading, grid-view-description, * grid-view-selection-badge, grid-view-grid, grid-view-item, grid-view-card, grid-view-drag-handle, * grid-view-select-button, grid-view-badge, grid-view-content, grid-view-title, grid-view-excerpt * @variant sortable * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { GripVertical, Check } from "lucide-react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface GridItem { id: string title: string excerpt?: string category?: string } interface GridView04Props { heading?: string description?: string items?: GridItem[] onReorder?: (items: GridItem[]) => void onSelectionChange?: (selectedIds: string[]) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: GridItem[] = [ { id: "item-1", title: "Review documentation", excerpt: "Go through the API documentation and update examples", category: "Docs" }, { id: "item-2", title: "Fix login bug", excerpt: "Users unable to login with SSO on mobile devices", category: "Bug" }, { id: "item-3", title: "Add dark mode", excerpt: "Implement theme switching with system preference detection", category: "Feature" }, { id: "item-4", title: "Optimize queries", excerpt: "Reduce database load on the dashboard page", category: "Performance" }, { id: "item-5", title: "Write unit tests", excerpt: "Cover the authentication module with tests", category: "Testing" }, { id: "item-6", title: "Update dependencies", excerpt: "Upgrade React and other core packages", category: "Maintenance" }, ] // ============================================================================ // COMPONENT // ============================================================================ function GridView04({ heading = "Organize Your Collection", description = "Drag and drop to reorder items, click to select multiple.", items: initialItems = defaultItems, onReorder, onSelectionChange, className, idBase = "grid-view-04", }: GridView04Props) { const headingId = `${idBase}-heading` const [items, setItems] = React.useState(initialItems) const [draggedItem, setDraggedItem] = React.useState(null) const [selectedItems, setSelectedItems] = React.useState>(new Set()) const handleDragStart = (e: React.DragEvent, id: string) => { setDraggedItem(id) e.dataTransfer.effectAllowed = "move" } const handleDragOver = (e: React.DragEvent, targetId: string) => { e.preventDefault() if (!draggedItem || draggedItem === targetId) return const draggedIndex = items.findIndex((item) => item.id === draggedItem) const targetIndex = items.findIndex((item) => item.id === targetId) const newItems = [...items] const [removed] = newItems.splice(draggedIndex, 1) newItems.splice(targetIndex, 0, removed) setItems(newItems) } const handleDragEnd = () => { setDraggedItem(null) onReorder?.(items) } const toggleSelect = (id: string) => { const newSelected = new Set(selectedItems) if (newSelected.has(id)) { newSelected.delete(id) } else { newSelected.add(id) } setSelectedItems(newSelected) onSelectionChange?.(Array.from(newSelected)) } return (

{/* Header */}

{heading && (

{heading}

)} {description && (

{description}

)} {selectedItems.size > 0 && ( {selectedItems.size} selected )}

{/* Grid */}

{items.map((item) => (

handleDragStart(e, item.id)} onDragOver={(e) => handleDragOver(e, item.id)} onDragEnd={handleDragEnd} className={cn( "group cursor-move transition-all", draggedItem === item.id && "scale-95 opacity-50", selectedItems.has(item.id) && "ring-2 ring-primary ring-offset-2 ring-offset-background" )} >

{/* Drag Handle */}

{/* Select Button */} {/* Content */}

{item.title}

{item.category && ( {item.category} )}

{item.excerpt && (

{item.excerpt}

)}

))}

) } export default GridView04 export { GridView04, type GridView04Props }