67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Activity, Globe2, Map } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { Link } from "@/i18n/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import { LanguageSwitcher } from "./language-switcher";
|
|
|
|
interface NavbarProps {
|
|
activeView?: "globe" | "map";
|
|
}
|
|
|
|
export function Navbar({ activeView = "globe" }: NavbarProps) {
|
|
const t = useTranslations("navbar");
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 bg-[var(--bg-primary)]/80 backdrop-blur-xl">
|
|
<div className="mx-auto flex h-14 max-w-[1800px] items-center justify-between px-4">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<span className="text-2xl">🦞</span>
|
|
<span
|
|
className="font-mono text-lg font-bold tracking-tight"
|
|
style={{ color: "var(--accent-cyan)", textShadow: "var(--glow-cyan)" }}
|
|
>
|
|
{t("brand")}
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-1 rounded-lg border border-white/5 bg-white/5 p-1">
|
|
<Link
|
|
href="/"
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
|
|
activeView === "globe"
|
|
? "bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
|
|
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
|
|
)}
|
|
>
|
|
<Globe2 className="h-3.5 w-3.5" />
|
|
{t("globe")}
|
|
</Link>
|
|
<Link
|
|
href="/continent/asia"
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
|
|
activeView === "map"
|
|
? "bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
|
|
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
|
|
)}
|
|
>
|
|
<Map className="h-3.5 w-3.5" />
|
|
{t("map")}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-1.5">
|
|
<Activity className="h-3.5 w-3.5 text-[var(--accent-green)]" />
|
|
<span className="text-xs text-[var(--text-secondary)]">{t("live")}</span>
|
|
</div>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|