TesslateAI

Ex.
Create a React component named Header that accepts the following props:

logo (string): the URL to the logo image

title (string): the title text to display

menuItems (array of objects): each object should contain a label (string) and href (string)
The Header should render a logo (an <img>), the title (e.g., in an <h1>), and a navigation menu with links. The component should be responsive with a mobile menu option. Export it as the default export.

It should be one of the coolest things I've ever seen. Have it have a search and profile login and almost every feature that is really nice in a header. It should be framer level quality.

Construct a React component named Dashboard that integrates the Header, Sidebar, MainContent, and Footer components. (These should all be imports) This component should:

State Management: Maintain a state variable activeTab (string) using React’s useState hook, defaulting to an initial value (e.g., 'dashboard').

State Propagation: Pass activeTab and a state update function (e.g., setActiveTab) to the Sidebar component via the onTabChange prop. Also pass activeTab to MainContent so that it knows which content to render.

Layout: Arrange the components using a responsive layout. Place the Header at the top, a flex container for the body with the Sidebar on the left and MainContent on the right, and the Footer at the bottom.

Styling: Use inline styles or CSS classes for basic layout structure (e.g., flexbox, grid). Export Dashboard as the default export.