77 lines
3.3 KiB
TypeScript
77 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Fingerprint, Languages, ArrowLeft, ArrowRight, Moon, Sun } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
import { useLanguage } from "@/components/language-provider";
|
|
import { useTheme } from "@/components/theme-provider";
|
|
import { useLoginModal } from "@/components/login-modal-provider";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const LINKS = [
|
|
{ id: "benefits", label: { fa: "مزایا", en: "Benefits" } },
|
|
{ id: "ecosystem", label: { fa: "محصولات", en: "Products" } },
|
|
{ id: "capabilities", label: { fa: "قابلیتها", en: "Capabilities" } },
|
|
{ id: "safety", label: { fa: "امنیت", en: "Safety" } },
|
|
];
|
|
|
|
export function Navbar() {
|
|
const { t, lang, toggle } = useLanguage();
|
|
const { theme, toggle: toggleTheme } = useTheme();
|
|
const { open } = useLoginModal();
|
|
const pathname = usePathname();
|
|
const Arrow = lang === "fa" ? ArrowLeft : ArrowRight;
|
|
|
|
if (pathname?.startsWith("/account") || pathname?.startsWith("/admin")) return null;
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur-xl dark:border-white/10 dark:bg-ink/80">
|
|
<div className="container-x flex h-16 items-center justify-between gap-4">
|
|
<a href="#top" className="flex items-center gap-2.5 font-semibold text-slate-900 dark:text-white">
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-gradient shadow-lg shadow-brand-900/20 dark:shadow-brand-900/40">
|
|
<Fingerprint className="h-5 w-5 text-white" />
|
|
</span>
|
|
<span className="text-lg tracking-tight">{process.env.NEXT_PUBLIC_SITE_NAME || "MyAccount Hamsoo"}</span>
|
|
</a>
|
|
|
|
<nav className="hidden items-center gap-1 lg:flex">
|
|
{LINKS.map((l) => (
|
|
<a
|
|
key={l.id}
|
|
href={`#${l.id}`}
|
|
className="rounded-lg px-3 py-2 text-sm text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white"
|
|
>
|
|
{l.label[lang]}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={toggleTheme}
|
|
aria-label="Toggle theme"
|
|
className="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-600 transition hover:bg-slate-100 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5"
|
|
>
|
|
{theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
|
</button>
|
|
<button
|
|
onClick={toggle}
|
|
aria-label="Toggle language"
|
|
className="flex h-9 items-center gap-1.5 rounded-lg border border-slate-200 px-3 text-sm text-slate-600 transition hover:bg-slate-100 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5"
|
|
>
|
|
<Languages className="h-4 w-4" />
|
|
{lang === "fa" ? "EN" : "فا"}
|
|
</button>
|
|
<button
|
|
onClick={open}
|
|
className={cn(buttonVariants({ size: "sm" }), "hidden sm:inline-flex")}
|
|
>
|
|
{t.nav.login}
|
|
<Arrow className="h-4 w-4 rtl:rotate-180" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|