Glass Dock

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6interface DockItem {
7  id: string
8  icon: React.ReactNode
9  label: string
10  href?: string
11  onClick?: () => void
12  active?: boolean
13}
14 
15type DockOrientation = "horizontal" | "vertical"
16 
17interface GlassDockProps extends React.HTMLAttributes<HTMLDivElement> {
18  items: DockItem[]
19  magnification?: number
20  baseSize?: number
21  maxSize?: number
22  orientation?: DockOrientation
23  glassIntensity?: "low" | "medium" | "high"
24}
25 
26const glassConfig = {
27  low: {
28    bg: "bg-white/5",
29    blur: "backdrop-blur-xl",
30    border: "border-white/10",
31    itemBg: "bg-white/5",
32    itemHover: "hover:bg-white/10",
33  },
34  medium: {
35    bg: "bg-white/10",
36    blur: "backdrop-blur-2xl",
37    border: "border-white/20",
38    itemBg: "bg-white/10",
39    itemHover: "hover:bg-white/20",
40  },
41  high: {
42    bg: "bg-white/15",
43    blur: "backdrop-blur-3xl",
44    border: "border-white/30",
45    itemBg: "bg-white/15",
46    itemHover: "hover:bg-white/25",
47  },
48}
49 
50const GlassDock = React.forwardRef<HTMLDivElement, GlassDockProps>(
51  (
52    {
53      className,
54      items,
55      magnification = 1.5,
56      baseSize = 48,
57      maxSize = 72,
58      orientation = "horizontal",
59      glassIntensity = "high",
60      ...props
61    },
62    ref,
63  ) => {
64    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null)
65    const [mousePos, setMousePos] = React.useState<number | null>(null)
66    const dockRef = React.useRef<HTMLDivElement>(null)
67    const glass = glassConfig[glassIntensity]
68    const isVertical = orientation === "vertical"
69 
70    const handleMouseMove = React.useCallback(
71      (e: React.MouseEvent) => {
72        if (!dockRef.current) return
73        const rect = dockRef.current.getBoundingClientRect()
74        setMousePos(isVertical ? e.clientY - rect.top : e.clientX - rect.left)
75      },
76      [isVertical],
77    )
78 
79    const handleMouseLeave = React.useCallback(() => {
80      setMousePos(null)
81      setHoveredIndex(null)
82    }, [])
83 
84    const getScale = React.useCallback(
85      (index: number) => {
86        if (mousePos === null) return 1
87 
88        const itemSize = baseSize + 16
89        const itemCenter = index * itemSize + itemSize / 2
90        const distance = Math.abs(mousePos - itemCenter)
91        const maxDistance = itemSize * 2
92 
93        if (distance > maxDistance) return 1
94 
95        const scale = 1 + (magnification - 1) * (1 - distance / maxDistance)
96        return Math.min(scale, magnification)
97      },
98// … truncated