Floating Dock

import { Folder, Home, Mail, Search, Settings, User } from "lucide-react";

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

export function FloatingDock() {
  return (
    <div className="flex items-end gap-2 rounded-2xl border border-neutral-800 bg-neutral-900 px-3 py-2 shadow-xl">
      {ICONS.map((Icon, i) => (
        <button
          key={i}
          type="button"
          className="flex size-10 items-center justify-center rounded-xl text-neutral-400 transition-all duration-200 ease-out hover:-translate-y-1.5 hover:scale-125 hover:bg-neutral-800 hover:text-amber-400"
        >
          <Icon className="size-4" />
        </button>
      ))}
    </div>
  );
}