Dock

1"use client"
2 
3import * as React from "react"
4import {
5  motion,
6  useMotionValue,
7  useSpring,
8  useTransform,
9  AnimatePresence,
10} from "motion/react"
11import { cn } from "@/registry/wise-ui/lib/utils"
12 
13interface DockItem {
14  id: string
15  icon: React.ReactNode
16  label: string
17  href?: string
18}
19 
20interface DockProps {
21  items: DockItem[]
22  onItemClick?: (item: DockItem) => void
23  magnification?: number
24  distance?: number
25  className?: string
26}
27 
28function Dock({
29  items,
30  onItemClick,
31  magnification = 1.5,
32  distance = 150,
33  className,
34}: DockProps) {
35  const mouseX = useMotionValue(Infinity)
36 
37  return (
38    <div
39      className={cn(
40        "inline-flex items-end gap-2 rounded-2xl border border-border bg-background/80 px-3 py-2 backdrop-blur-md",
41        className
42      )}
43      onMouseMove={(e) => mouseX.set(e.clientX)}
44      onMouseLeave={() => mouseX.set(Infinity)}
45    >
46      {items.map((item) => (
47        <DockIcon
48          key={item.id}
49          item={item}
50          mouseX={mouseX}
51          magnification={magnification}
52          distance={distance}
53          onClick={() => onItemClick?.(item)}
54        />
55      ))}
56    </div>
57  )
58}
59Dock.displayName = "Dock"
60 
61function DockIcon({
62  item,
63  mouseX,
64  magnification,
65  distance,
66  onClick,
67}: {
68  item: DockItem
69  mouseX: ReturnType<typeof useMotionValue<number>>
70  magnification: number
71  distance: number
72  onClick: () => void
73}) {
74  const ref = React.useRef<HTMLButtonElement>(null)
75  const [hovered, setHovered] = React.useState(false)
76 
77  const distanceCalc = useTransform(mouseX, (val) => {
78    const el = ref.current
79    if (!el) return distance
80    const rect = el.getBoundingClientRect()
81    const center = rect.left + rect.width / 2
82    return Math.abs(val - center)
83  })
84 
85  const baseSize = 40
86  const scaleRaw = useTransform(
87    distanceCalc,
88    [0, distance],
89    [magnification, 1]
90  )
91  const scale = useSpring(scaleRaw, { stiffness: 300, damping: 25 })
92  const size = useTransform(scale, (s) => s * baseSize)
93 
94  const Wrapper = item.href ? "a" : "button"
95  const wrapperProps = item.href
96    ? { href: item.href, target: "_blank" as const, rel: "noopener noreferrer" }
97    : {}
98 
99  return (
100    <div className="relative flex flex-col items-center">
101      <AnimatePresence>
102        {hovered && (
103          <motion.div
104            initial={{ opacity: 0, y: 4 }}
105            animate={{ opacity: 1, y: -4 }}
106            exit={{ opacity: 0, y: 4 }}
107// … truncated