can you add all these options the following theme. import React, { useState, useContext, createContext, useCallback, useMemo } from "react"; import { FiHome, FiPieChart, FiUsers, FiSettings, FiLogOut, FiMenu, FiBell, FiSearch, FiSun, FiMoon } from "react-icons/fi"; import { Line, Bar } from "react-chartjs-2"; import { Chart as ChartJS } from "chart.js/auto"; import { motion, AnimatePresence } from "framer-motion"; const ThemeContext = createContext(); const mockData = { users: [ { id: 1, name: "John Doe", email: "john@example.com", status: "Active", role: "Admin" }, { id: 2, name: "Jane Smith", email: "jane@example.com", status: "Inactive", role: "User" }, { id: 3, name: "Mike Johnson", email: "mike@example.com", status: "Active", role: "Editor" }, ], stats: { totalUsers: 1234, revenue: 45600, activeProjects: 89, pendingTasks: 34, }, chartData: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: "User Growth", data: [65, 59, 80, 81, 56, 55], fill: false, borderColor: "#0077B6" }] } }; const DashboardLayout = () => { const [sidebarOpen, setSidebarOpen] = useState(true); const [darkMode, setDarkMode] = useState(false); const [activeSection, setActiveSection] = useState("dashboard"); const themeContextValue = useMemo(() => ({ darkMode, toggleDarkMode: () => setDarkMode(prev => !prev) }), [darkMode]); return ( <ThemeContext.Provider value={themeContextValue}> <div className={`flex h-screen bg-background ${darkMode ? "dark" : ""}`}> <Sidebar isOpen={sidebarOpen} setIsOpen={setSidebarOpen} activeSection={activeSection} setActiveSection={setActiveSection} /> <div className="flex-1 flex flex-col overflow-hidden"> <Header toggleSidebar={() => setSidebarOpen(prev => !prev)} darkMode={darkMode} setDarkMode={setDarkMode} /> <main className="flex-1 overflow-x-hidden overflow-y-auto bg-background p-6"> <Dashboard /> </main> </div> </div> </ThemeContext.Provider> ); }; const Sidebar = ({ isOpen, setIsOpen, activeSection, setActiveSection }) => { const menuItems = [ { icon: FiHome, label: "Dashboard", id: "dashboard" }, { icon: FiPieChart, label: "Analytics", id: "analytics" }, { icon: FiUsers, label: "Users", id: "users" }, { icon: FiSettings, label: "Settings", id: "settings" }, ]; return ( <motion.div initial={{ x: -200 }} animate={{ x: isOpen ? 0 : -200 }} className="bg-card text-card-foreground w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform md:relative md:translate-x-0 transition duration-200 ease-in-out z-30" > <div className="flex items-center justify-between px-4"> <span className="text-2xl font-semibold">Admin</span> <div className="flex gap-2"> <button onClick={() => setIsOpen(false)} className="md:hidden"> <FiMenu className="h-6 w-6" /> </button> <button onClick={() => setIsOpen(!isOpen)} className="hidden md:block hover:bg-secondary p-1 rounded-lg" > <FiMenu className="h-6 w-6" /> </button> </div> </div> <nav> {menuItems.map((item) => ( <button key={item.id} onClick={() => setActiveSection(item.id)} className={`flex items-center space-x-4 px-4 py-3 rounded-lg w-full ${activeSection === item.id ? "bg-primary text-primary-foreground" : "hover:bg-secondary"}`} > <item.icon className="h-5 w-5" /> <span>{item.label}</span> </button> ))} <button className="flex items-center space-x-4 px-4 py-3 rounded-lg w-full hover:bg-secondary mt-4"> <FiLogOut className="h-5 w-5" /> <span>Logout</span> </button> </nav> </motion.div> ); }; const Header = ({ toggleSidebar, darkMode, setDarkMode }) => { return ( <header className="bg-card text-card-foreground shadow-sm z-20"> <div className="flex items-center justify-between px-6 py-4"> <div className="flex items-center space-x-4"> <button onClick={toggleSidebar} className="md:hidden"> <FiMenu className="h-6 w-6" /> </button> <div className="relative"> <FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" /> <input type="text" placeholder="Search..." className="pl-10 pr-4 py-2 rounded-lg bg-muted text-foreground focus:outline-none focus:ring-2 focus:ring-primary" /> </div> </div> <div className="flex items-center space-x-4"> <button className="relative"> <FiBell className="h-6 w-6" /> <span className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full w-4 h-4 text-xs flex items-center justify-center">3</span> </button> <button onClick={() => setDarkMode(!darkMode)}> {darkMode ? <FiSun className="h-6 w-6" /> : <FiMoon className="h-6 w-6" />} </button> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User" className="h-8 w-8 rounded-full" /> </div> </div> </header> ); }; const StatCard = ({ title, value, change, icon: Icon }) => ( <div className="bg-card p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"> <div className="flex items-center justify-between"> <div> <p className="text-muted-foreground text-sm">{title}</p> <h3 className="text-2xl font-semibold mt-1">{value}</h3> <p className={`text-sm mt-2 ${change >= 0 ? "text-chart-2" : "text-destructive"}`}> {change >= 0 ? "+" : ""}{change}% </p> </div> <div className="bg-secondary p-4 rounded-full"> <Icon className="h-6 w-6 text-accent" /> </div> </div> </div> ); const Dashboard = () => { const { users, stats, chartData } = mockData; return ( <div className="space-y-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <StatCard title="Total Users" value={stats.totalUsers} change={12} icon={FiUsers} /> <StatCard title="Revenue" value={`$${stats.revenue}`} change={8} icon={FiPieChart} /> <StatCard title="Active Projects" value={stats.activeProjects} change={-5} icon={FiHome} /> <StatCard title="Pending Tasks" value={stats.pendingTasks} change={15} icon={FiSettings} /> </div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="bg-card p-6 rounded-lg shadow-sm"> <h3 className="text-lg font-semibold mb-4">User Growth</h3> <Line data={chartData} options={{ responsive: true }} /> </div> <div className="bg-card p-6 rounded-lg shadow-sm"> <h3 className="text-lg font-semibold mb-4">Revenue Trends</h3> <Bar data={chartData} options={{ responsive: true }} /> </div> </div> <div className="bg-card rounded-lg shadow-sm overflow-hidden"> <div className="p-6"> <h3 className="text-lg font-semibold">User Management</h3> </div> <div className="overflow-x-auto"> <table className="w-full"> <thead className="bg-muted"> <tr> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Name</th> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</th> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Role</th> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Actions</th> </tr> </thead> <tbody className="divide-y divide-border"> {users.map((user) => ( <tr key={user.id}> <td className="px-6 py-4 whitespace-nowrap">{user.name}</td> <td className="px-6 py-4 whitespace-nowrap">{user.email}</td> <td className="px-6 py-4 whitespace-nowrap"> <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${user.status === "Active" ? "bg-chart-2 text-white" : "bg-destructive text-white"}`}> {user.status} </span> </td> <td className="px-6 py-4 whitespace-nowrap">{user.role}</td> <td className="px-6 py-4 whitespace-nowrap text-sm text-accent"> <button className="mr-2">Edit</button> <button>Delete</button> </td> </tr> ))} </tbody> </table> </div> </div> </div> ); }; export default DashboardLayout; module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx,html}", ], theme: { extend: { colors: { primary: { DEFAULT: "#0077B6", foreground: "#FFFFFF", }, secondary: { DEFAULT: "#F0F1F3", foreground: "#03045E", }, accent: { DEFAULT: "#00B4D8", foreground: "#03045E", }, background: "#CAF0F8", foreground: "#03045E", card: { DEFAULT: "#FFFFFF", foreground: "#03045E", }, popover: { DEFAULT: "#FFFFFF", foreground: "#03045E", }, muted: { DEFAULT: "#F0F1F3", foreground: "#00B4D8", }, destructive: { DEFAULT: "#FF4C4C", foreground: "#FFFFFF", }, border: "#E0E0E0", input: "#E0E0E0", ring: "#0077B6", chart: { 1: "#FF6F61", 2: "#4CAF50", 3: "#03A9F4", 4: "#FFC107", 5: "#8E44AD", }, dark: { primary: "#0077B6", "primary-foreground": "#FFFFFF", secondary: "#1E2A4B", "secondary-foreground": "#CAF0F8", accent: "#00B4D8", "accent-foreground": "#CAF0F8", background: "#03045E", foreground: "#CAF0F8", card: "#121212", "card-foreground": "#CAF0F8", popover: "#121212", "popover-foreground": "#CAF0F8", muted: "#1E2A4B", "muted-foreground": "#00B4D8", destructive: "#FF4C4C", "destructive-foreground": "#FFFFFF", border: "#3C3C3C", input: "#3C3C3C", ring: "#0077B6", }, }, borderRadius: { sm: "0.125rem", }, boxShadow: { sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)", }, fontFamily: { inter: ["Inter", "sans-serif"], }, fontSize: { heading: "28px", body: "16px", }, fontWeight: { heading: "600", body: "400", }, }, }, plugins: [], darkMode: "class", }