Post
878
I was able to make a demo dashboard application with my react model through prompting. You can play with it here:
Tesslate/Tessa-T1-14B
http://playcode.io/2309196
What my react model made (prompted each file individually)
And a final prompt:
http://playcode.io/2309196
What my react model made (prompted each file individually)
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.And a final prompt:
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.