Magnetic Cursor Dock

"use client";

import { MagneticCursorDock } from "@/components/ui/magnetic-cursor-dock";
import { Home, Search, Mail, Music, Camera, Settings } from "lucide-react";

const items = [
  { icon: Home, label: "Home" },
  { icon: Search, label: "Search" },
  { icon: Mail, label: "Mail" },
  { icon: Music, label: "Music" },
  { icon: Camera, label: "Camera" },
  { icon: Settings, label: "Settings" },
];

export default function Default() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8">
      <MagneticCursorDock className="h-24">
        {items.map(({ icon: Icon, label }) => (
          <div
            key={label}
            aria-label={label}
            className="flex size-12 items-center justify-center rounded-xl bg-zinc-800"
          >
            <Icon className="size-6 text-white" />
          </div>
        ))}
      </MagneticCursorDock>
    </div>
  );
}