78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { Icon } from "@iconify/react";
|
|
import Link from "next/link";
|
|
import { Avatar, AvatarFallback, AvatarImage, Separator } from "poyraz-ui/atoms";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "poyraz-ui/molecules";
|
|
import { SearchCommand } from "@/components/search-command";
|
|
import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
|
|
|
|
export function SiteNavbar() {
|
|
return (
|
|
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-border pb-4">
|
|
<Link href="/" aria-label="Go to home" className="inline-flex items-center">
|
|
<Avatar className="h-9 w-9 rounded-sm">
|
|
<AvatarImage src="/logo/logo.jpeg" alt="Poyraz Avsever" />
|
|
<AvatarFallback className="rounded-sm bg-muted text-xs font-semibold">
|
|
PA
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Link>
|
|
|
|
<div className="flex flex-wrap items-center justify-end gap-3">
|
|
<nav aria-label="Main navigation">
|
|
<ul className="flex flex-wrap items-center gap-3 text-sm">
|
|
{NAV_LINKS.map((item, index) => (
|
|
<li key={item.id} className="flex items-center gap-3">
|
|
{index > 0 && (
|
|
<Separator orientation="vertical" className="h-4 bg-border" decorative />
|
|
)}
|
|
<Link
|
|
href={item.href}
|
|
className="text-foreground/55 transition-colors hover:text-foreground"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<Separator orientation="vertical" className="hidden h-4 bg-border sm:block" decorative />
|
|
<SearchCommand />
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
|
|
<Icon icon="mdi:share-variant" width={16} height={16} />
|
|
<span>Social</span>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-52 rounded-sm">
|
|
<DropdownMenuLabel>Social Links</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
{SOCIAL_LINKS.map((item) => (
|
|
<DropdownMenuItem key={item.id} asChild>
|
|
<Link
|
|
href={item.href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Icon icon={item.icon} width={16} height={16} />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|