ThemeAwareLogo
Logo component that switches between dark and light mode versions based on theme.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
headerData | HeaderData | Yes | - | Header data containing logo URLs |
className | string | No | '' | Additional CSS classes |
Usage
import { ThemeAwareLogo } from '@/components/layout/ThemeAwareLogo';
<ThemeAwareLogo headerData={headerData} />Features
- Theme-aware: Automatically switches logo based on dark/light mode
- Fallback: Uses dark logo if available, otherwise light logo
- Next.js Image: Uses optimized Next.js Image component
- CLS-safe intrinsic sizing: Uses intrinsic size
196x21to preserve aspect ratio before the image loads - Responsive sizing: Different sizes for mobile/tablet/desktop
- Hover effect: Opacity transition on hover
Logo Sizes
- Mobile:
h-4(16px) - Small screens:
sm:h-5(20px) - Large screens:
lg:h-7(28px)
Notes
- Returns
nullif no logo URL is found - Uses
unoptimizedflag for logo images - Marked as
priorityto preload in the header and reduce layout shift - Links to home page (
/) - Logo alt text comes from
alternate_text_for_the_logoor defaults to "Logo"