80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
navigationMenuTriggerStyle,
|
|
} from "@/components/ui/navigation-menu";
|
|
import { WordRotate } from "@/components/ui/word-rotate";
|
|
import { ThemeToggle } from "./theme-toggle";
|
|
import { LanguageSwitcher } from "./language-switcher";
|
|
import { MobileMenu } from "./mobile-menu";
|
|
import { cn } from "@/lib/utils";
|
|
import { useTranslations, useLocale } from "next-intl";
|
|
import Link from "next/link";
|
|
|
|
export default function Header() {
|
|
const t = useTranslations("header.nav");
|
|
const locale = useLocale();
|
|
|
|
const links = [
|
|
{ href: `/${locale}/library`, label: "Library" },
|
|
{ href: `/${locale}/market`, label: t("market") },
|
|
{ href: `/${locale}/sobre`, label: t("about") },
|
|
{ href: `/${locale}/precos`, label: t("prices") },
|
|
{ href: `/${locale}/apoiar`, label: t("support"), highlight: true },
|
|
];
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/60 backdrop-blur supports-backdrop-filter:bg-background/60">
|
|
<div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-2">
|
|
<Link href="/">
|
|
<WordRotate
|
|
words={["Tibia Trade"]}
|
|
className="text-lg font-semibold tracking-tight hover:text-primary transition-colors"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<NavigationMenu className="hidden md:flex">
|
|
<NavigationMenuList>
|
|
{links.map(({ href, label, highlight }) => (
|
|
<NavigationMenuItem key={href}>
|
|
<NavigationMenuLink asChild>
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
navigationMenuTriggerStyle(),
|
|
"bg-transparent",
|
|
highlight &&
|
|
"bg-primary text-primary-foreground hover:bg-primary/90"
|
|
)}
|
|
>
|
|
{label}
|
|
</Link>
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
|
|
{/* Desktop Controls */}
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<ThemeToggle />
|
|
<LanguageSwitcher />
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<div className="md:hidden">
|
|
<MobileMenu links={links} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|