50 lines
No EOL
1.5 KiB
TypeScript
50 lines
No EOL
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { Button } from '../src/components/ui/button';
|
|
import Image from 'next/image';
|
|
|
|
const examples = [
|
|
{ name: "Chat", href: "/chat" },
|
|
{ name: "Dashboard", href: "/dashboard" },
|
|
{ name: "Mail", href: "/mail" },
|
|
{ name: "Tree", href: "/tree" },
|
|
{ name: "Editor", href: "/editor" },
|
|
{ name: "Tables", href: "/table" },
|
|
{ name: "Meet", href: "/meet" },
|
|
{ name: "Videos", href: "/videos" },
|
|
{ name: "Music", href: "/music" },
|
|
{ name: "Templates", href: "/templates" },
|
|
{ name: "Settings", href: "/settings" },
|
|
];
|
|
|
|
export function Nav() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="examples-nav-container">
|
|
<div className="examples-nav-inner" style={{ display: 'flex', alignItems: 'center' }}>
|
|
<Image
|
|
src={"/images/generalbots-logo.svg"}
|
|
alt="Logo"
|
|
width={92}
|
|
height={56}
|
|
className="logo"
|
|
style={{ marginLeft: '10px' , marginRight: '10px' , marginTop: '3px'}} // Add some spacing between logo and buttons
|
|
/>
|
|
<div style={{ display: 'flex' }}>
|
|
{examples.map((example) => (
|
|
<Button
|
|
key={example.href}
|
|
onClick={() => router.push(example.href)}
|
|
className={`example-button ${pathname === example.href ? 'active' : ''}`}
|
|
>
|
|
{example.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |