Orbital Command Ring

import { OrbitalCommandRing } from "@/components/orbital-command-ring";
import { useRouter } from "next/navigation";

export default function PageNavigationDemo() {
  const router = useRouter();

  // Define custom options linked to your application routes
  const customOptions = [
    { id: "home", label: "Home", icon: "🏠", color: "#7fff5e", path: "/" },
    { id: "docs", label: "Docs", icon: "📖", color: "#00f0ff", path: "/docs/introduction" },
    { id: "loom", label: "Loom", icon: "🧶", color: "#ff5c71", path: "/components/signal-loom" },
    { id: "bento", label: "Bento", icon: "🍱", color: "#ff8c00", path: "/components/hypermorph-bento" }
  ];

  return (
    <div className="h-[500px] w-full flex items-center justify-center bg-black">
      <OrbitalCommandRing
        options={customOptions}
        onNavigate={(path) => router.push(path)}
        title="Page Navigator"
        eyebrow="Hold & drag to select destination"
      />
    </div>
  );
}