Floating Dock

"use client";
import { useRef, useState } from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
import { Home, Folder, Search, Settings, User, Mail, Music } from "lucide-react";

type State = "idle" | "hover";

const ICONS = [Home, Folder, Search, Mail, Music, User, Settings];

function DockIcon({
Icon,
mouseX,
}: {
Icon: typeof Home;
mouseX: ReturnType<typeof useMotionValue<number>>;
}) {
const ref = useRef<HTMLDivElement>(null);
const distance = useTransform(mouseX, (v) => {
  const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
  return v - bounds.x - bounds.width / 2;
});
const widthSync = useTransform(distance, [-100, 0, 100], [36, 56, 36]);
const width = useSpring(widthSync, { mass: 0.1, stiffness: 200, damping: 14 });

return (
  <motion.div
    ref={ref}
    style={{ width, height: width }}
    className="grid aspect-square place-items-center rounded-lg bg-background/60 border border-border/60"
  >
    <Icon className="h-1/2 w-1/2 text-muted-foreground" />
  </motion.div>
);
}

export function FloatingDock({ state = "idle" }: { state?: State }) {
const mouseX = useMotionValue(state === "hover" ? 200 : Infinity);
return (
  <div className="grid h-[200px] w-full max-w-md place-items-end">
    <motion.div
      onMouseMove={(e) => mouseX.set(e.clientX)}
      onMouseLeave={() => mouseX.set(Infinity)}
      className="mb-4 flex items-end gap-2 rounded-2xl border border-border bg-background/50 px-3 py-2 backdrop-blur"
    >
      {ICONS.map((Icon, i) => (
        <DockIcon key={i} Icon={Icon} mouseX={mouseX} />
      ))}
    </motion.div>
  </div>
);
}