Admin Dashboard - Copy this React, Tailwind Component to your project
Import React, { useState } from 'react'; import { FiMenu, FiUsers, FiBookOpen, FiFileText } from 'react icons/fi'; const AdminDashboard = () => { const [isSidebarOpen, setIsSidebarOpen] = useState(false); const toggleSidebar = () => { setIsSidebarOpen(!isSidebarOpen); }; const DashboardCard = ({ icon: Icon, title, count, color }) => ( <div className={`bg white rounded lg shadow md p 6 flex flex col items center justify center transform transition all duration 300 hover:scale 105 hover:shadow lg ${color}`} > <Icon className="text 4xl mb 2" /> <h3 className="text xl font semibold mb 1">{title}</h3> <p className="text 2xl font bold">{count}</p> </div> ); return ( <div className="flex h screen bg gradient to br from purple 500 to blue 500"> {/* Sidebar */} <div className={`bg gray 800 text white transition all duration 300 ease in out ${ isSidebarOpen ? 'w 60' : 'w 20' } flex flex col`} onMouseEnter={() => setIsSidebarOpen(true)} onMouseLeave={() => setIsSidebarOpen(false)} > <div className="p 4 flex items center justify between"> <button onClick={toggleSidebar} className="text white focus:outline none focus:ring 2 focus:ring white rounded md" > <FiMenu className="text 2xl" /> </button> </div> {isSidebarOpen && ( <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=crop&w=1170&q=80" alt="Admin Avatar" className="w 20 h 20 rounded full mb 4 cursor pointer" onClick={() => console.log('Navigate to admin profile')} /> <h2 className="text lg font semibold">John Doe</h2> <p className="text sm text gray 400">Administrator</p> </div> )} </div> {/* Main Content */} <div className="flex 1 p 8 overflow auto"> <h1 className="text 4xl font bold text white mb 8">Admin Dashboard</h1> <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> <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> </div> </div> ); }; export default AdminDashboard; add a manageUser and manageCourse and formStatus and printForm and logout in sidebar
