Dock

1"use client";
2 
3import React, { useRef, useState, useContext } from "react";
4import {
5  motion,
6  MotionValue,
7  useMotionValue,
8  useSpring,
9  useTransform,
10  AnimatePresence,
11} from "framer-motion";
12import { cn } from "@/lib/utils";
13 
14export interface DockProps {
15  children: React.ReactNode;
16  className?: string;
17  magnification?: number;
18  distance?: number;
19  variant?: "normal" | "glass";
20}
21 
22export interface DockIconProps {
23  children: React.ReactNode;
24  label: string;
25  onClick?: () => void;
26  className?: string;
27}
28 
29const DockContext = React.createContext<{
30  mouseX: MotionValue<number>;
31  magnification: number;
32  distance: number;
33  variant: "normal" | "glass";
34} | null>(null);
35 
36const SPRING_TACTILE = {
37  type: "spring",
38  stiffness: 400,
39  damping: 25,
40  mass: 0.1,
41} as const;
42 
43export function Dock({
44  children,
45  className,
46  magnification = 80,
47  distance = 140,
48  variant = "normal",
49}: DockProps) {
50  const mouseX = useMotionValue(Infinity);
51  const ref = useRef<HTMLDivElement>(null);
52 
53  const handleMouseMove = (e: React.MouseEvent) => {
54    mouseX.set(e.clientX);
55  };
56 
57  const handleMouseLeave = () => {
58    mouseX.set(Infinity);
59  };
60 
61  return (
62    <DockContext.Provider value={{ mouseX, magnification, distance, variant }}>
63      <motion.div
64        ref={ref}
65        onMouseMove={handleMouseMove}
66        onMouseLeave={handleMouseLeave}
67        className={cn(
68          "mx-auto flex h-16 items-end gap-4 rounded-3xl pb-3",
69          variant === "glass"
70            ? "bg-white/10 dark:bg-white/5 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.15)] px-4"
71            : "bg-neutral-100/80 dark:bg-neutral-900/30 border border-neutral-200/50 dark:border-neutral-800/50 px-4",
72          className
73        )}
74        role="navigation"
75        aria-label="Desktop Dock"
76      >
77        {children}
78      </motion.div>
79    </DockContext.Provider>
80  );
81}
82 
83export function DockIcon({
84  children,
85  label,
86  onClick,
87  className,
88}: DockIconProps) {
89  const ref = useRef<HTMLDivElement>(null);
90  const context = useContext(DockContext);
91  const [isBouncing, setIsBouncing] = useState(false);
92  const [isHovered, setIsHovered] = useState(false);
93 
94  if (!context) {
95    throw new Error("DockIcon must be used within a Dock component");
96  }
97 
98  const { mouseX, magnification, distance, variant } = context;
99 
100  // Calculate distance from mouse pointer to center of icon
101  const distanceTransform = useTransform(mouseX, (val) => {
102// … truncated