A
Anonymous

Dashboard - Copy this React, Tailwind Component to your project

Return ( <div className={cn( "rounded md flex flex col md:flex row bg gray 100 dark:bg neutral 800 w [100vw] flex 1 max w [100vw] border border neutral 200 dark:border neutral 700 sm:overflow hidden", "h screen" // for your use case, use `h screen` instead of `h [60vh]` )} > <Sidebar open={open} setOpen={setOpen}> <SidebarBody className="justify between gap 10"> <div className="flex flex col flex 1 overflow y auto overflow x hidden"> {open ? <Logo /> : <LogoIcon />} <div className="mt 8 flex flex col gap 2"> {links.map((link, idx) => ( <div key={idx} onClick={() => { if (link.label === "Logout") { fetch("/api/users/logout", { method: "POST", }) .then((response) => { if (response.ok) { // console.log('Logged out successfully', response); router.push("/"); router.refresh(); // Force refresh cause doesnot work in second and subsequent instances } else { console.error("Failed to log out"); } }) .catch((error) => { console.error("Error during logout:", error); }); } }} > <SidebarLink key={idx} link={link} /> </div> ))} </div> </div> <div> <SidebarLink link={{ label: "MUJ", href: "#", icon: ( <Image src="./muj logo.svg" className="h 7 w 7 flex shrink 0 rounded full" width={50} height={50} alt="Avatar" /> ), }} /> </div> </SidebarBody> </Sidebar> <Dashboard /> </div> ); buid an interactive dashboard just like this with only one card redirecting to form page and on card to show details of what was filled in the form

Prompt
Component Preview

About

Dashboard - Interactive UI with a sidebar, responsive design, and a single card linking to a form page. Built with React and Tailwind. Get code instantly!

Share

Last updated 1 month ago