"use client" import { useState } from "react" // shadcn import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "@/components/ui/item" // assets import { FileText, ImageIcon, Music, Video } from "lucide-react" const files = [ { id: "doc-001", icon: FileText, iconColor: "text-blue-500", bgColor: "bg-blue-50 dark:bg-blue-950", title: "Project Brief.docx", description: "Updated 2 days ago · 48 KB", }, { id: "img-001", icon: ImageIcon, iconColor: "text-pink-500", bgColor: "bg-pink-50 dark:bg-pink-950", title: "Banner Design.png", description: "Updated 5 days ago · 2.1 MB", }, { id: "vid-001", icon: Video, iconColor: "text-violet-500", bgColor: "bg-violet-50 dark:bg-violet-950", title: "Onboarding Tour.mp4", description: "Updated last week · 128 MB", }, { id: "aud-001", icon: Music, iconColor: "text-emerald-500", bgColor: "bg-emerald-50 dark:bg-emerald-950", title: "Intro Jingle.mp3", description: "Updated 3 weeks ago · 3.4 MB", }, ] // ------------------------------ | ITEM - CHECKBOX | ------------------------------ // export function ItemCheckbox() { const [selected, setSelected] = useState([]) const toggle = (id: string) => setSelected((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id] ) return (

{selected.length} of {files.length} selected {selected.length > 0 && ( )}

{files.map((file) => { const Icon = file.icon const isSelected = selected.includes(file.id) return ( toggle(file.id)} > {file.title} {file.description}

e.stopPropagation()}> toggle(file.id)} />

) })}

) }