103 lines
2.3 KiB
TypeScript
103 lines
2.3 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
import { Menu } from 'lucide-react';
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@kit/ui/dropdown-menu';
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuItem,
|
|
NavigationMenuList,
|
|
} from '@kit/ui/navigation-menu';
|
|
|
|
const links = {
|
|
SignIn: {
|
|
label: 'Sign In',
|
|
path: '/auth/sign-in',
|
|
},
|
|
Blog: {
|
|
label: 'Blog',
|
|
path: '/blog',
|
|
},
|
|
Docs: {
|
|
label: 'Documentation',
|
|
path: '/docs',
|
|
},
|
|
Pricing: {
|
|
label: 'Pricing',
|
|
path: '/pricing',
|
|
},
|
|
FAQ: {
|
|
label: 'FAQ',
|
|
path: '/faq',
|
|
},
|
|
};
|
|
|
|
export function SiteNavigation() {
|
|
const className = `hover:underline text-sm`;
|
|
|
|
return (
|
|
<>
|
|
<div className={'hidden items-center lg:flex'}>
|
|
<NavigationMenu>
|
|
<NavigationMenuList className={'space-x-3'}>
|
|
<NavigationMenuItem>
|
|
<Link className={className} href={links.Blog.path}>
|
|
{links.Blog.label}
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link className={className} href={links.Docs.path}>
|
|
{links.Docs.label}
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link className={className} href={links.Pricing.path}>
|
|
{links.Pricing.label}
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
|
|
<NavigationMenuItem>
|
|
<Link className={className} href={links.FAQ.path}>
|
|
{links.FAQ.label}
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
|
|
<div className={'flex items-center lg:hidden'}>
|
|
<MobileDropdown />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function MobileDropdown() {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger aria-label={'Open Menu'}>
|
|
<Menu className={'h-9'} />
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent>
|
|
{Object.values(links).map((item) => {
|
|
const className = 'flex w-full h-full items-center';
|
|
|
|
return (
|
|
<DropdownMenuItem key={item.path}>
|
|
<Link className={className} href={item.path}>
|
|
{item.label}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|