84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
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) {
|
|
const isSvgLogo = logo?.endsWith('.svg');
|
|
|
|
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 ? (
|
|
<div className="h-8 sm:h-10 md:h-12 w-auto flex items-center justify-center">
|
|
{isSvgLogo ? (
|
|
// For SVG, use img tag with proper path handling
|
|
<img
|
|
src={logo}
|
|
alt={siteName}
|
|
className="h-full w-auto object-contain"
|
|
/>
|
|
) : (
|
|
// For other images, use Next.js Image with optimized sizes
|
|
<div className="relative h-8 sm:h-10 md:h-12 w-auto">
|
|
<Image
|
|
src={logo}
|
|
alt={siteName}
|
|
fill
|
|
className="object-contain"
|
|
sizes="(max-width: 640px) 100vw, (max-width: 768px) 120px, 144px"
|
|
priority={false}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="w-8 sm:w-10 md:w-12 h-8 sm:h-10 md:h-12 bg-primary rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-xs sm:text-sm">KLZ</span>
|
|
</div>
|
|
)}
|
|
<span className="hidden sm:block font-bold text-lg md:text-xl 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} logo={logo} />
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</header>
|
|
);
|
|
} |