"use client";

import * as React from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

export interface DockItem {
  id?: string;
  label?: string;
  ariaLabel?: string;
  icon?: React.ReactNode;
  content?: React.ReactNode;
  onClick?: () => void;
  className?: string;
}

interface DockProps {
  items: DockItem[];
  magnification?: number;
  baseSize?: string;
  distance?: number;
  showLabels?: boolean;
  className?: string;
}

function DockIcon({
  item,
  mouseX,
  magnification,
  distance,
  showLabels,
}: {
  item: DockItem;
  mouseX: ReturnType<typeof useMotionValue<number>>;
  magnification: number;
  distance: number;
  showLabels: boolean;
}) {
  const ref = React.useRef<HTMLButtonElement>(null);
  const [isHovered, setIsHovered] = React.useState(false);

  const distanceFromMouse = useTransform(mouseX, (val) => {
    const bounds = ref.current?.getBoundingClientRect();
    if (!bounds) return Infinity;
    return val - bounds.left - bounds.width / 2;
  });

  const scaleTransform = useTransform(
    distanceFromMouse,
    [-distance, 0, distance],
    [1, magnification, 1]
  );

  const scale = useSpring(scaleTransform, {
    mass: 0.12,
    stiffness: 160,
    damping: 14,
  });

  return (
    <motion.button
      ref={ref}
      type="button"
      aria-label={item.ariaLabel ?? item.label ?? "Dock item"}
      onClick={item.onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ scale }}
      className={cn(
        "relative flex h-[var(--dock-item-size)] w-[var(--dock-item-size)] items-center justify-center rounded-xl border border-border bg-card text-foreground shadow-sm transition-colors hover:bg-background",
        item.className
      )}
      whileTap={{ scale: 0.95 }}
    >
      <span className="flex items-center justify-center text-foreground">
        {item.content ?? item.icon}
      </span>
      {showLabels && item.label ? (
        <motion.span
          initial={{ opacity: 0, y: 8 }}
          animate={isHovered ? { opacity: 1, y: 0 } : { opacity: 0, y: 8 }}
          transition={{ duration: 0.14, ease: "easeOut" }}
          className="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md border border-border bg-card px-2 py-1 text-xs font-medium text-foreground shadow-sm"
        >
          {item.label}
        </motion.span>
      ) : null}
    </motion.button>
  );
}

function Dock({
  items,
  magnification = 1.6,
  baseSize = "clamp(2.5rem, 6vw, 3.5rem)",
  distance = 140,
  showLabels = true,
  className,
}: DockProps) {
  const mouseX = useMotionValue(Infinity);

  const handleMouseMove = (event: React.MouseEvent) => {
    mouseX.set(event.clientX);
  };

  const handleMouseLeave = () => {
    mouseX.set(Infinity);
  };

  return (
    <motion.div
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={cn(
        "inline-flex items-end gap-3 rounded-2xl border border-border bg-card px-4 pb-3 pt-2 shadow-sm",
        className
      )}
      style={{
        "--dock-item-size": baseSize,
      } as React.CSSProperties}
    >
      {items.map((item, index) => (
        <DockIcon
          key={item.id ?? item.label ?? index}
          item={item}
          mouseX={mouseX}
          magnification={magnification}
          distance={distance}
          showLabels={showLabels}
        />
      ))}
    </motion.div>
  );
}

export { Dock };
export type { DockProps };
Dock

Dependencies

Files

Installation
