Files
kozmos-qr-menu/components/Header.tsx
T
mstfyldzandClaude Sonnet 4.6 718e0a6228 Build Kozmos QR menu site — full implementation
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>
2026-06-03 02:35:14 +03:00

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>
)
}