'use client';
import {
XDSTopNav,
XDSTopNavHeading,
XDSTopNavItem,
XDSTopNavMegaMenu,
XDSTopNavMegaMenuItem,
XDSTopNavMegaMenuFeaturedCard,
} from '@xds/core/TopNav';
function RocketIcon() {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.58-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
</svg>
);
}
function BookIcon() {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
</svg>
);
}
function CodeIcon() {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
</svg>
);
}
function ShieldIcon() {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
</svg>
);
}
export default function TopNavMegaMenuShowcase() {
return (
<XDSTopNav
label="Mega menu demo"
heading={<XDSTopNavHeading heading="DevTools" />}
startContent={
<>
<XDSTopNavItem label="Overview" href="#" isSelected />
<XDSTopNavMegaMenu
label="Products"
items={
<>
<XDSTopNavMegaMenuItem
title="Deploy"
description="Ship to production in seconds"
icon={<RocketIcon />}
href="#deploy"
/>
<XDSTopNavMegaMenuItem
title="Documentation"
description="Guides, references, and tutorials"
icon={<BookIcon />}
href="#docs"
/>
<XDSTopNavMegaMenuItem
title="API"
description="Programmatic access to all features"
icon={<CodeIcon />}
href="#api"
/>
<XDSTopNavMegaMenuItem
title="Security"
description="Enterprise-grade protection"
icon={<ShieldIcon />}
href="#security"
/>
</>
}
featured={
<XDSTopNavMegaMenuFeaturedCard
title="What's New"
description="Check out our latest features and improvements in the Q2 release."
linkLabel="Read the changelog"
linkHref="#changelog"
/>
}
/>
</>
}
/>
);
}