53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
import type { Locale } from "@/core/i18n/locale";
|
|
import { useI18n } from "@/core/i18n/hooks";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type HeaderProps = {
|
|
className?: string;
|
|
homeURL?: string;
|
|
locale?: Locale;
|
|
};
|
|
|
|
export function Header({ className, homeURL }: HeaderProps) {
|
|
const isExternalHome = !homeURL;
|
|
const { locale: resolvedLocale, t } = useI18n();
|
|
const lang = resolvedLocale.substring(0, 2);
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"container-md fixed top-0 right-0 left-0 z-20 mx-auto flex h-16 items-center justify-between backdrop-blur-xs",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-6">
|
|
<a
|
|
href={homeURL ?? "/"}
|
|
target={isExternalHome ? "_blank" : "_self"}
|
|
rel={isExternalHome ? "noopener noreferrer" : undefined}
|
|
>
|
|
<h1 className="font-serif text-xl">CM 助手</h1>
|
|
</a>
|
|
</div>
|
|
<nav className="mr-8 ml-auto flex items-center gap-8 text-sm font-medium">
|
|
<Link
|
|
href={`/${lang}/docs`}
|
|
className="text-secondary-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{t.home.docs}
|
|
</Link>
|
|
<Link
|
|
href="/blog/posts"
|
|
className="text-secondary-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{t.home.blog}
|
|
</Link>
|
|
</nav>
|
|
<hr className="from-border/0 via-border/70 to-border/0 absolute top-16 right-0 left-0 z-10 m-0 h-px w-full border-none bg-linear-to-r" />
|
|
</header>
|
|
);
|
|
}
|