import StylishDock from "@/components/ui/magicdock";
import { Home as HomeIcon, Settings as SettingsIcon } from "lucide-react";
 
const dockItems = [
  {
    id: 1,
    icon: <HomeIcon size={24} />,
    label: "Home",
    description: "Go to homepage",
    onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
  },
  {
    id: 2,
    icon: <SettingsIcon size={24} />,
    label: "Settings",
    description: "Customize options",
    onClick: () => console.log("Settings clicked"),
  },
];
 
function App() {
  return (
    <div className="relative">
      <StylishDock
        items={dockItems}
        distance={150}
        panelHeight={64}
        baseItemSize={50}
        magnification={70}
        variant="default"
      />
    </div>
  );
}

import StylishDock from "@/components/ui/magicdock";
import { Home as HomeIcon, Docs as DocsIcon } from "lucide-react";
import { useRouter } from "next/navigation";
 
const dockItems = [
  {
    id: 1,
    icon: <HomeIcon size={24} />,
    label: "Home",
    description: "Go to homepage",
    onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
  },
  {
    id: 2,
    icon: <DocsIcon size={24} />,
    label: "Docs",
    description: "Read documentation",
    onClick: () => router.push("/docs"),
  },
];
 
function App() {
  return (
    <div className="relative">
      <StylishDock
        items={dockItems}
        distance={150}
        panelHeight={64}
        baseItemSize={50}
        magnification={70}
        variant="tooltip"
      />
    </div>
  );
}

  // Default variant
<MagicDock items={dockItems} variant="default" />
 
// Gradient variant
<MagicDock items={dockItems} variant="gradient" />
 
// Tooltip variant with custom magnification
<MagicDock 
  items={dockItems} 
  variant="tooltip" 
  magnification={90}
  baseItemSize={60}
/>