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
