import * as React from "react" import { motion } from "framer-motion" import { LucideIcon, Plus } from "lucide-react" import { cn } from "@/lib/utils" interface DockItem { icon: LucideIcon label: string status?: "synced" | "training" | "active" | "online" | "alert" | "idle" count?: string progress?: number } interface DockProps extends React.HTMLAttributes { items: DockItem[] showAddButton?: boolean onAddClick?: () => void } const statusColors = { training: "bg-primary animate-pulse", alert: "bg-destructive", active: "bg-[hsl(var(--chart-2))]", online: "bg-[hsl(var(--chart-1))]", synced: "bg-[hsl(var(--chart-4))]", idle: "bg-muted-foreground" } const Dock = React.forwardRef( ({ className, items, showAddButton = true, onAddClick, ...props }, ref) => { const [hoveredIndex, setHoveredIndex] = React.useState(null) return (

{items.map((item, index) => ( setHoveredIndex(index)} onHoverEnd={() => setHoveredIndex(null)} whileHover={{ scale: 1.1 }} > {item.status && (

)} {item.progress && ( )}

{item.label}

{item.count && (

{item.count}

)} ))} {showAddButton && ( )}

) } ) Dock.displayName = "Dock" export { Dock, type DockItem, type DockProps }