Dock

1"use client";
2 
3import {
4  AnimatePresence,
5  type MotionValue,
6  motion,
7  useMotionValue,
8  useSpring,
9  useTransform,
10} from "framer-motion";
11import * as React from "react";
12 
13type DockContextValue = {
14  mouseX: MotionValue<number>;
15  baseSize: number;
16  magnification: number;
17  distance: number;
18};
19 
20const DockContext = React.createContext<DockContextValue | null>(null);
21 
22function useDock() {
23  const ctx = React.useContext(DockContext);
24  if (!ctx) {
25    throw new Error("DockItem must be used within a <Dock>.");
26  }
27  return ctx;
28}
29 
30export type DockProps = React.HTMLAttributes<HTMLDivElement> & {
31  /** Resting size of each item in pixels. */
32  baseSize?: number;
33  /** Maximum magnified size in pixels at the pointer. */
34  magnification?: number;
35  /** Pointer distance in pixels over which items are affected. */
36  distance?: number;
37};
38 
39export type DockItemProps = React.HTMLAttributes<HTMLDivElement> & {
40  /** Label shown above the item on hover. */
41  label?: React.ReactNode;
42};
43 
44const PANEL_BASE =
45  "mx-auto flex h-16 items-end gap-3 rounded-2xl border border-border bg-card/70 px-3 pb-3 shadow-lg backdrop-blur-md";
46 
47const ITEM_BASE =
48  "group relative flex aspect-square items-center justify-center rounded-xl bg-muted text-foreground shadow-sm";
49 
50const Dock = React.forwardRef<HTMLDivElement, DockProps>(
51  (
52    {
53      baseSize = 44,
54      magnification = 72,
55      distance = 140,
56      className,
57      children,
58      onMouseMove,
59      onMouseLeave,
60      ...props
61    },
62    ref,
63  ) => {
64    const mouseX = useMotionValue(Number.POSITIVE_INFINITY);
65 
66    return (
67      <DockContext.Provider
68        value={{ mouseX, baseSize, magnification, distance }}
69      >
70        <div
71          ref={ref}
72          data-slot="dock"
73          role="toolbar"
74          aria-label="Dock"
75          className={`${PANEL_BASE} ${className ?? ""}`}
76          onMouseMove={(e) => {
77            mouseX.set(e.clientX);
78            onMouseMove?.(e);
79          }}
80          onMouseLeave={(e) => {
81            mouseX.set(Number.POSITIVE_INFINITY);
82            onMouseLeave?.(e);
83          }}
84          {...props}
85        >
86          {children}
87        </div>
88      </DockContext.Provider>
89    );
90  },
91);
92Dock.displayName = "Dock";
93 
94const DockItem = React.forwardRef<HTMLDivElement, DockItemProps>(
95  ({ label, className, children, ...props }, forwardedRef) => {
96    const { mouseX, baseSize, magnification, distance } = useDock();
97    const ref = React.useRef<HTMLDivElement>(null);
98// … truncated