80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import RoleGate from "@/components/auth/role-gate";
|
||
|
|
import {
|
||
|
|
NavigationMenu,
|
||
|
|
NavigationMenuContent,
|
||
|
|
NavigationMenuItem,
|
||
|
|
NavigationMenuLink,
|
||
|
|
NavigationMenuList,
|
||
|
|
NavigationMenuTrigger,
|
||
|
|
navigationMenuTriggerStyle,
|
||
|
|
} from "@/components/ui/navigation-menu"
|
||
|
|
|
||
|
|
const components: { title: string; href: string; description: string }[] = [
|
||
|
|
{
|
||
|
|
title: "Alert Dialog",
|
||
|
|
href: "/docs/primitives/alert-dialog",
|
||
|
|
description:
|
||
|
|
"A modal dialog that interrupts the user with important content and expects a response.",
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const MenuNavigation = () => {
|
||
|
|
return (
|
||
|
|
<NavigationMenu
|
||
|
|
className="absolute top-0 flex justify-center left-auto z-51 flex-wrap">
|
||
|
|
<p className="w-[300px] text-3xl text-center align-middle invisible md:visible">Tom To Speech</p>
|
||
|
|
<NavigationMenuList>
|
||
|
|
{/* <NavigationMenuItem>
|
||
|
|
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
|
||
|
|
<NavigationMenuContent>
|
||
|
|
<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
|
||
|
|
<li className="row-span-3">
|
||
|
|
<NavigationMenuLink asChild>
|
||
|
|
<a
|
||
|
|
className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
|
||
|
|
href="/">
|
||
|
|
<div className="mb-2 mt-4 text-lg font-medium">
|
||
|
|
Tom-to-Speech
|
||
|
|
</div>
|
||
|
|
<p className="text-sm leading-tight text-muted-foreground">
|
||
|
|
Text to speech software
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</NavigationMenuLink>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</NavigationMenuContent>
|
||
|
|
</NavigationMenuItem> */}
|
||
|
|
<NavigationMenuItem>
|
||
|
|
<Link href="/commands" legacyBehavior passHref>
|
||
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||
|
|
Commands
|
||
|
|
</NavigationMenuLink>
|
||
|
|
</Link>
|
||
|
|
</NavigationMenuItem>
|
||
|
|
<NavigationMenuItem>
|
||
|
|
<Link href="/settings" legacyBehavior passHref>
|
||
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||
|
|
Settings
|
||
|
|
</NavigationMenuLink>
|
||
|
|
</Link>
|
||
|
|
</NavigationMenuItem>
|
||
|
|
<RoleGate
|
||
|
|
roles={["ADMIN"]}>
|
||
|
|
<NavigationMenuItem>
|
||
|
|
<Link href="/admin" legacyBehavior passHref>
|
||
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||
|
|
Admin
|
||
|
|
</NavigationMenuLink>
|
||
|
|
</Link>
|
||
|
|
</NavigationMenuItem>
|
||
|
|
</RoleGate>
|
||
|
|
</NavigationMenuList>
|
||
|
|
</NavigationMenu>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MenuNavigation;
|