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}
/>