Next.js 16 App Router, TR/EN i18n via [lang] routing and proxy.ts, Tailwind v4, minimal list menu style, sticky bottom tab bar with Intersection Observer, PWA manifest, WhatsApp fixed button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
type Dict = {
|
|
header: { tagline: string }
|
|
langSwitch: { current: string; other: string; otherHref: string }
|
|
}
|
|
|
|
export default function Header({ dict }: { dict: Dict }) {
|
|
return (
|
|
<header
|
|
className="fixed top-0 left-0 right-0 z-40 bg-coffee"
|
|
style={{ height: 'var(--header-h)' }}
|
|
>
|
|
{/* Thin teal accent line at bottom */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-px bg-teal opacity-40" />
|
|
|
|
<div className="flex items-center justify-between h-full px-5">
|
|
{/* Logo */}
|
|
<div className="flex flex-col leading-none">
|
|
<span className="font-display text-cream text-xl font-semibold tracking-[0.18em] uppercase">
|
|
KOZMOS
|
|
</span>
|
|
<span className="font-body text-teal text-[0.6rem] font-medium tracking-[0.22em] uppercase mt-0.5">
|
|
{dict.header.tagline}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Language switcher */}
|
|
<Link
|
|
href={dict.langSwitch.otherHref}
|
|
className="flex items-center gap-1.5 group"
|
|
aria-label={`Switch to ${dict.langSwitch.other}`}
|
|
>
|
|
<span className="font-body text-xs font-semibold text-cream/40 tracking-wider">
|
|
{dict.langSwitch.current}
|
|
</span>
|
|
<span className="font-body text-xs text-cream/20">·</span>
|
|
<span className="font-body text-xs font-semibold text-teal tracking-wider group-hover:text-cream transition-colors duration-200">
|
|
{dict.langSwitch.other}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|