Admin Dashboard - Copy this React, Tailwind Component to your project
Import React, { useState } from 'react'; import { motion } from 'framer motion'; import { FiUsers, FiBookOpen, FiFileText, FiMenu, FiLogOut } from 'react icons/fi'; const AdminDashboard = () => { const [isSidebarOpen, setIsSidebarOpen] = useState(true); const toggleSidebar = () => { setIsSidebarOpen(!isSidebarOpen); }; const DashboardCard = ({ icon: Icon, title, count, color }) => ( <motion.div whileHover={{ scale: 1.05 }} className={`bg white p 6 rounded lg shadow md ${color} transition all duration 300 ease in out`} > <div className="flex items center justify between"> <div> <p className="text sm font medium text gray 600">{title}</p> <p className="text 3xl font semibold mt 2">{count}</p> </div> <Icon className="text 4xl opacity 80" /> </div> </motion.div> ); return ( <div className="flex h screen bg gradient to br from purple 50 to blue 100"> <motion.nav initial={{ width: isSidebarOpen ? '240px' : '80px' }} animate={{ width: isSidebarOpen ? '240px' : '80px' }} className="bg white shadow lg z 20" > <div className="p 4"> <button onClick={toggleSidebar} className="text gray 500 hover:text gray 600 focus:outline none" aria label="Toggle Sidebar" > <FiMenu size={24} /> </button> </div> <div className="mt 8 flex flex col items center"> <img src="https://images.unsplash.com/photo 1472099645785 5658abf4ff4e?ixlib=rb 4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Admin Avatar" className="w 16 h 16 rounded full object cover" /> {isSidebarOpen && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.2 }} className="mt 4 text center" > <h2 className="text lg font semibold text gray 800">John Doe</h2> <p className="text sm text gray 600">Administrator</p> </motion.div> )} </div> <div className="mt 12"> <button className="w full py 3 px 6 text left hover:bg gray 100 transition colors duration 200 flex items center text gray 700"> <FiLogOut className="mr 3" /> {isSidebarOpen && 'Logout'} </button> </div> </motion.nav> <main className="flex 1 p 8 overflow y auto"> <h1 className="text 4xl font bold text gray 800 mb 8">Admin Dashboard</h1> <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 8"> <DashboardCard icon={FiUsers} title="Total Users" count="1,234" color="text blue 600" /> <DashboardCard icon={FiBookOpen} title="Active Courses" count="42" color="text green 600" /> <DashboardCard icon={FiFileText} title="Form Submissions" count="567" color="text purple 600" /> </div> </main> </div> ); }; export default AdminDashboard; can you make the sidebar open and close on hover?
