dock

1import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5interface DockProps {
6  /** Distance threshold for magnification effect */
7  magnification?: number;
8  /** Maximum scale factor when hovered */
9  maxScale?: number;
10  /** Base size of dock items in pixels */
11  iconSize?: number;
12  /** Distance from mouse to apply magnification */
13  distance?: number;
14  className?: string;
15  children?: React.ReactNode;
16}
17 
18const DockContext = React.createContext<{
19  mouseX: ReturnType<typeof useMotionValue<number>>;
20  magnification: number;
21  maxScale: number;
22  iconSize: number;
23  distance: number;
24} | null>(null);
25 
26const Dock = React.forwardRef<HTMLDivElement, DockProps>(
27  (
28    {
29      className,
30      children,
31      magnification = 60,
32      maxScale = 1.5,
33      iconSize = 48,
34      distance = 140,
35    },
36    ref,
37  ) => {
38    const mouseX = useMotionValue(Infinity);
39 
40    return (
41      <DockContext.Provider
42        value={{ mouseX, magnification, maxScale, iconSize, distance }}
43      >
44        <motion.div
45          ref={ref}
46          onMouseMove={(e) => mouseX.set(e.pageX)}
47          onMouseLeave={() => mouseX.set(Infinity)}
48          className={cn(
49            "dock mx-auto flex h-16 items-end gap-2 rounded-2xl border bg-background/80 px-3 pb-2 backdrop-blur-md",
50            "shadow-foreground/5 shadow-lg",
51            className,
52          )}
53        >
54          {children}
55        </motion.div>
56      </DockContext.Provider>
57    );
58  },
59);
60Dock.displayName = "Dock";
61 
62interface DockItemProps {
63  className?: string;
64  children?: React.ReactNode;
65  onClick?: () => void;
66}
67 
68const DockItem = React.forwardRef<HTMLDivElement, DockItemProps>(
69  ({ className, children, onClick }, _ref) => {
70    const context = React.useContext(DockContext);
71    const itemRef = React.useRef<HTMLDivElement>(null);
72 
73    if (!context) {
74      throw new Error("DockItem must be used within a Dock");
75    }
76 
77    const { mouseX, maxScale, iconSize, distance } = context;
78 
79    const distanceCalc = useTransform(mouseX, (val: number) => {
80      const bounds = itemRef.current?.getBoundingClientRect() ?? {
81        x: 0,
82        width: 0,
83      };
84      return val - bounds.x - bounds.width / 2;
85    });
86 
87    const widthSync = useTransform(
88      distanceCalc,
89      [-distance, 0, distance],
90      [iconSize, iconSize * maxScale, iconSize],
91    );
92 
93    const width = useSpring(widthSync, {
94      mass: 0.1,
95// … truncated