mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-06 13:55:04 +01:00
parent 297de69928
commit f991ea6b9b
393 changed files with 41362 additions and 4811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/layout/Header.tsx
View File

@@ -13,33 +13,47 @@ interface HeaderProps {
}
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}`}
<Link
href={`/${locale}`}
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
>
{logo ? (
<div className="relative h-8 w-auto">
<Image
src={logo.replace(/^\//, '')}
alt={siteName}
fill
className="object-contain"
sizes="(max-width: 768px) 100vw, 120px"
priority={false}
/>
<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 h-8 bg-primary rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-sm">KLZ</span>
<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 text-gray-900">
<span className="hidden sm:block font-bold text-lg md:text-xl text-gray-900">
{siteName}
</span>
</Link>