60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { Container } from '@/components/ui/Container';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Navigation } from './Navigation';
|
|
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
|
import { MobileMenu } from './MobileMenu';
|
|
|
|
interface HeaderProps {
|
|
locale: string;
|
|
siteName?: string;
|
|
logo?: string;
|
|
}
|
|
|
|
export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
|
|
<Container maxWidth="6xl" padding="md">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo and Branding */}
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href={`/${locale}`}
|
|
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
|
|
>
|
|
{logo ? (
|
|
<img src={logo} alt={siteName} className="h-8 w-auto" />
|
|
) : (
|
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">KLZ</span>
|
|
</div>
|
|
)}
|
|
<span className="hidden sm:block font-bold text-lg text-gray-900">
|
|
{siteName}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center gap-6">
|
|
<Navigation locale={locale} variant="header" />
|
|
<LocaleSwitcher />
|
|
<Link href={`/${locale}/contact`}>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
>
|
|
Contact Us
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<div className="flex items-center gap-2">
|
|
<MobileMenu locale={locale} siteName={siteName} />
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</header>
|
|
);
|
|
} |