Dock

import { useRef } from 'react';
import {
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
  type MotionValue
} from 'motion/react';

type App = { name: string; icon: string; open?: boolean };

const BASE = 48; // icon size at rest, in px
const MAX = 80; // icon size right under the pointer
const REACH = 140; // icons farther than this from the pointer stay at rest

export function Dock({ apps }: { apps: App[] }) {
  // Infinity means the pointer is off the dock, so nothing grows.
  const mouseX = useMotionValue(Infinity);

  return (
    <nav
      aria-label='Apps'
      onPointerMove={(event) => mouseX.set(event.clientX)}
      onPointerLeave={() => mouseX.set(Infinity)}
      className='mx-auto flex h-16 w-fit items-end gap-2 rounded-2xl border border-white/20 bg-white/10 px-2 pb-2 backdrop-blur-xl'
    >
      {apps.map((app) => (
        <DockIcon key={app.name} app={app} mouseX={mouseX} />
      ))}
    </nav>
  );
}

function DockIcon({ app, mouseX }: { app: App; mouseX: MotionValue<number> }) {
  const ref = useRef<HTMLButtonElement>(null);
  const reduceMotion = useReducedMotion();
  const distance = useTransform(mouseX, (x) => {
    const box = ref.current?.getBoundingClientRect();
    return box ? x - box.left - box.width / 2 : Infinity;
  });
  const target = useTransform(distance, [-REACH, 0, REACH], [BASE, MAX, BASE]);
  // Width, not scale, so the neighbors slide aside as an icon grows.
  const size = useSpring(target, { stiffness: 400, damping: 30, mass: 0.3 });

  return (
    <motion.button
      ref={ref}
      type='button'
      aria-label={app.name}
      style={{
        width: reduceMotion ? BASE : size,
        height: reduceMotion ? BASE : size
      }}
      className='group relative shrink-0 outline-none'
    >
      <img src={app.icon} alt='' className='size-full rounded-[24%]' />
      <span className='pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-md bg-black/75 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100'>
        {app.name}
      </span>
      {app.open && (
        <span className='absolute -bottom-1.5 left-1/2 size-1 -translate-x-1/2 rounded-full bg-white' />
      )}
    </motion.button>
  );
}