Headers

Top Header (Authenticated)

Top section of the header with Mighty logo, search bar, and user profile. Uses semantic design tokens for consistent theming.

Jack Polson

<TopHeader
  logoSrc="/mighty-logo.svg"
  logoAlt="Mighty"
  userName="Jack Polson"
  onUserClick={() => console.log('User clicked')}
  onSearch={(value) => console.log('Search:', value)}
/>

Top Header (Guest/Non-Authenticated)

Simplified header for non-authenticated users showing only the Mighty logo. Search and user profile are hidden when userName and onSearch props are not provided.

<TopHeader
  logoSrc="/mighty-logo.svg"
  logoAlt="Mighty"
/>

Quick Links Navigation

Horizontal navigation bar with 5 quick access links: Hot Deals, Entertainment, Travel, Choose a City, and All Categories. Uses Lucide React icons.

<QuickLinks
  activeLink="hot-deals"
  onLinkClick={(id) => console.log('Clicked:', id)}
/>

Combined Header

Full header component combining the top section and quick links navigation. This is the recommended component for consistent navigation across pages.

Jack Polson

<FullHeader
  logoSrc="/mighty-logo.svg"
  logoAlt="Mighty"
  userName="Jack Polson"
  activeLink="entertainment"
  onUserClick={() => console.log('User clicked')}
  onSearch={(value) => console.log('Search:', value)}
  onLinkClick={(id) => console.log('Clicked:', id)}
/>

Props

TopHeader Props

type TopHeaderProps = {
  logoSrc?: string        // Path to logo image
  logoAlt?: string        // Alt text for logo (default: "Mighty")
  userName?: string       // User's display name (default: "Guest")
  onUserClick?: () => void
  onSearch?: (value: string) => void
  className?: string
}

QuickLinks Props

type QuickLinksProps = {
  links?: QuickLinkItem[]  // Optional custom links
  activeLink?: string      // ID of active link
  onLinkClick?: (id: string) => void
  className?: string
}

type QuickLinkItem = {
  id: string
  label: string
  icon: React.ReactNode
  href: string
}

FullHeader Props

type FullHeaderProps = {
  // Combines all TopHeader and QuickLinks props
  logoSrc?: string
  logoAlt?: string
  userName?: string
  onUserClick?: () => void
  onSearch?: (value: string) => void
  quickLinks?: QuickLinkItem[]
  activeLink?: string
  onLinkClick?: (id: string) => void
  showDebug?: boolean
  className?: string
}