Magnifying dock

import { useState } from "react";
import { motion } from "framer-motion";
import { Calendar, Compass, Layers, MessageCircle, User } from "lucide-react";

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

const ITEMS = [
  { icon: Compass, label: "Explore" },
  { icon: Calendar, label: "Calendar" },
  { icon: MessageCircle, label: "Messages" },
  { icon: Layers, label: "Layers" },
  { icon: User, label: "Profile" },
];

interface DockProps {
  zoom?: number;
}

export default function Dock({ zoom = 1.45 }: DockProps) {
  const [hover, setHover] = useState(-9);

  return (
    <div className="flex h-24 items-end gap-2 rounded-[22px] bg-white/70 dark:bg-black/70 p-3 text-[#1d1d1f] dark:text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] backdrop-blur-[20px]">
      {ITEMS.map(({ icon: Icon, label }, i) => (
        <motion.button
          key={label}
          type="button"
          aria-label={label}
          onHoverStart={() => setHover(i)}
          onHoverEnd={() => setHover(-9)}
          animate={{
            scale: hover === i ? zoom : Math.abs(hover - i) === 1 ? 1.12 : 1,
            y: hover === i ? -10 : 0,
          }}
          transition={spring}
          className="grid h-11 w-11 place-items-center rounded-xl bg-white dark:bg-[#1c1c1e] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
        >
          <Icon className="h-5 w-5" />
        </motion.button>
      ))}
    </div>
  );
}