"use client"; import React, { useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, type MotionValue, } from "motion/react"; export interface MagDockItem { id: number; icon: React.ElementType; name: string; active?: boolean; onClick?: () => void; } interface MagDockProps { items: MagDockItem[]; className?: string; } function MagDockIcon({ mouseX, icon: Icon, name, onItemClick, }: { mouseX: MotionValue; icon: React.ElementType; name: string; onItemClick?: () => void; }) { const ref = useRef(null); const [hovered, setHovered] = useState(false); const distance = useTransform(mouseX, (val) => { const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }; return val - bounds.x - bounds.width / 2; }); const sizeSync = useTransform( distance, [-150, -75, 0, 75, 150], [40, 52, 72, 52, 40], ); const size = useSpring(sizeSync, { mass: 0.1, stiffness: 200, damping: 14 }); const liftSync = useTransform(size, [40, 72], [0, -14]); const lift = useSpring(liftSync, { mass: 0.1, stiffness: 200, damping: 14 }); return (

{hovered && ( {name} )} setHovered(true)} onHoverEnd={() => setHovered(false)} onClick={() => onItemClick?.()} whileTap={{ scale: 0.88 }} className={cn( "flex cursor-pointer items-center justify-center rounded-2xl", "from-background/30 to-background/10 text-foreground bg-linear-to-b", "shadow-[0_2px_8px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.2)]", "dark:shadow-[0_2px_8px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.1)]", "hover:from-background/40 hover:to-background/15 transition-colors", )} >

); } export default function MagDock({ items, className }: MagDockProps) { const mouseX = useMotionValue(Infinity); return (

mouseX.set(e.clientX)} onMouseLeave={() => mouseX.set(Infinity)} className={cn( "mx-auto flex h-16 items-end gap-2 rounded-2xl px-3 pb-2", "border-border/40 border", "bg-background/70 backdrop-blur-2xl", "shadow-[0_8px_32px_rgba(0,0,0,0.12)]", "dark:shadow-[0_8px_32px_rgba(0,0,0,0.45)]", )} > {items.map((item) => ( ))}

); }