Header

The Header component is a versatile header that displays a logo, brand name, and user-related actions. Below you will find detailed information about its props and how to use it.

Props

Prop	Type	Default	Description
user	User	null	The user object containing the user's name and email.
icon	ReactNode	null	An optional icon to display next to the brand name.
anonymousActions	ReactNode	null	Actions to display when the user is not logged in.
sticky	boolean	true	Determines if the header should stick to the top of the page.
brandName	string	Required	The name of the brand to display in the header.
onLogout	() => void	null	Callback function to handle logout action.

Example Usage

Header with Logged-In User

<Header
  brandName="Ginger Society"
  user={{ name: 'Jane Doe', email: 'jane.doe@example.com' }}
  icon={<span >Icon</span>}
  onLogout={() => alert('Logout clicked')}
/>

Ginger Society

Welcome

JD

Header with No User

<Header
  brandName="Ginger Society"
  icon={<span >Icon</span>}
  anonymousActions={<Button label="Login" onClick={() => alert('Login clicked')} />}
/>

Ginger Society