Components with taste, that you own.Components with taste, that you own.

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/** macOS-style dock: icons magnify smoothly with distance from the cursor. */
export function Dock({
  items,
  className,
}: {
  items: { id: string; label: string; icon: React.ReactNode; onSelect?: () => void }[];
  className?: string;
}) {
  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);

  const magnify = (clientX: number) => {
    refs.current.forEach((el) => {
      if (!el) return;
      const r = el.getBoundingClientRect();
      const d = Math.abs(clientX - (r.left + r.width / 2));
      const scale = 1 + 0.7 * Math.exp(-((d / 70) ** 2));
      el.style.transform = `scale(${scale}) translateY(${(scale - 1) * -14}px)`;
    });
  };

  const reset = () =>
    refs.current.forEach((el) => {
      if (el) el.style.transform = "";
    });

  return (
    <div
      role="toolbar"
      className={cn(
        "inline-flex items-end gap-2 rounded-xl border border-line bg-surface/80 px-3 py-2.5 shadow-lift backdrop-blur-md",
        className,
      )}
      onMouseMove={(e) => magnify(e.clientX)}
      onMouseLeave={reset}
    >
      {items.map((item, i) => (
        <button
          key={item.id}
          ref={(el) => {
            refs.current[i] = el;
          }}
// …