├── .gitignore
├── .prettierrc
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── Dashboard UI Design.png
    ├── favicon-dark.svg
    └── favicon-light.svg
├── src
    ├── App.jsx
    ├── assets
    │   ├── logo-dark.svg
    │   ├── logo-light.svg
    │   ├── product-image.jpg
    │   └── profile-image.jpg
    ├── constants
    │   └── index.jsx
    ├── contexts
    │   └── theme-context.jsx
    ├── hooks
    │   ├── use-click-outside.jsx
    │   └── use-theme.jsx
    ├── index.css
    ├── layouts
    │   ├── footer.jsx
    │   ├── header.jsx
    │   └── sidebar.jsx
    ├── main.jsx
    ├── routes
    │   ├── dashboard
    │   │   └── page.jsx
    │   └── layout.jsx
    └── utils
    │   └── cn.js
├── tailwind.config.js
└── vite.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": ["prettier-plugin-tailwindcss"],
3 |   "singleAttributePerLine": true,
4 |   "tabWidth": 4,
5 |   "printWidth": 150
6 | }
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <br />
 2 | <div align="center">
 3 |     <img src="public/favicon-light.svg" style="vertical-align: middle;" width="48" height="48"/>
 4 |     <br />
 5 |     <br />
 6 |     <p>
 7 |         Build a Modern Dashboard UI Design using React JS, TailwindCSS.
 8 | </p>
 9 | <a href="https://youtu.be/uHxZMmvQXHQ">Watch Tutorial</a>
10 | 
11 | </div>
12 | 
13 | <br />
14 | 
15 | ![Dashboard UI Design](./public/Dashboard%20UI%20Design.png)
16 | 
17 | ## 🗒️ Table of Contents
18 | 
19 | 1. [💬 Introduction](#introduction)
20 | 2. [🛠️ Tools](#tools)
21 | 3. [✨ Features](#features)
22 | 4. [🚀 Getting Started](#getting-started)
23 | 5. [💻 Code Snippets](#code-snippets)
24 | 6. [☕ Support Me](#support-me)
25 | 
26 | ## <a name="introduction">💬 Introduction</a>
27 | 
28 | Welcome to the Dashboard UI Design repository! This project is a comprehensive guide to building a clean, user-friendly, and fully responsive dashboard interface. Whether you're new to UI/UX design or an experienced developer looking to enhance your skills, this repository provides essential resources to help you create an efficient and visually organized dashboard experience. Explore best practices for crafting intuitive layouts, managing data visualization, and ensuring seamless user interaction.
29 | 
30 | ## <a name="tools">🛠️ Tools</a>
31 | 
32 | -   [React JS](https://react.dev)
33 | -   [TailwindCSS](https://tailwindcss.com/)
34 | -   [Lucide Icons](https://lucide.dev/)
35 | -   [React Router](https://reactrouter.com/en/main)
36 | -   [Recharts](https://recharts.org/en-US/)
37 | 
38 | ## <a name="features">✨ Features</a>
39 | 
40 | -   **Responsive Design:** Ensures your portfolio looks great on desktops, tablets, and mobile devices.
41 | -   **Clean and Modern Layout:** A professional design that highlights your projects, skills, and experience.
42 | 
43 | ## <a name="getting-started">🚀 Getting Started</a>
44 | 
45 | To get started follow these steps:
46 | 
47 | #### Cloning the Repository
48 | 
49 | Using CLI
50 | 
51 | ```bash
52 | git clone https://github.com/xdcode2/dashboard-ui-design.git
53 | ```
54 | 
55 | **\*\*_Ensure you have installed [Git](https://git-scm.com) on your machine._**
56 | 
57 | or using GitHub:
58 | 
59 | -   Go to the project [repository](https://github.com/xdcode2/dashboard-ui-design) on my GitHub page
60 | -   Click on the green button on the top 👆
61 | -   Click Download ZIP
62 | 
63 | #### Installation
64 | 
65 | Install the project dependencies using npm:
66 | 
67 | ```bash
68 | npm install
69 | ```
70 | 
71 | **\*\*_Ensure you have installed [NodeJS](https://nodejs.org/en) on your machine._**
72 | 
73 | #### Running the Project
74 | 
75 | ```bash
76 | npm run dev
77 | ```
78 | 
79 | **\*\*_This project uses [Vite](https://vitejs.dev)._**
80 | 
81 | ## <a name="support-me">☕ Support Me</a>
82 | 
83 | [![ko-fi](https://img.shields.io/static/v1?message=Support%20me%20on%20ko-fi&logo=kofi&label=&color=ff5e5b&logoColor=white&labelColor=&style=for-the-badge)](https://ko-fi.com/J3J1NMYT7)
84 | 
85 | [![youtube](https://img.shields.io/static/v1?message=Subscribe&logo=youtube&label=&color=FF0000&logoColor=white&labelColor=&style=for-the-badge)](https://www.youtube.com/@_xdcode_ "XD Code")
86 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import react from 'eslint-plugin-react'
 4 | import reactHooks from 'eslint-plugin-react-hooks'
 5 | import reactRefresh from 'eslint-plugin-react-refresh'
 6 | 
 7 | export default [
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     files: ['**/*.{js,jsx}'],
11 |     languageOptions: {
12 |       ecmaVersion: 2020,
13 |       globals: globals.browser,
14 |       parserOptions: {
15 |         ecmaVersion: 'latest',
16 |         ecmaFeatures: { jsx: true },
17 |         sourceType: 'module',
18 |       },
19 |     },
20 |     settings: { react: { version: '18.3' } },
21 |     plugins: {
22 |       react,
23 |       'react-hooks': reactHooks,
24 |       'react-refresh': reactRefresh,
25 |     },
26 |     rules: {
27 |       ...js.configs.recommended.rules,
28 |       ...react.configs.recommended.rules,
29 |       ...react.configs['jsx-runtime'].rules,
30 |       ...reactHooks.configs.recommended.rules,
31 |       'react/jsx-no-target-blank': 'off',
32 |       'react-refresh/only-export-components': [
33 |         'warn',
34 |         { allowConstantExport: true },
35 |       ],
36 |     },
37 |   },
38 | ]
39 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta
 6 |             name="viewport"
 7 |             content="width=device-width, initial-scale=1.0"
 8 |         />
 9 |         <link
10 |             rel="shortcut icon"
11 |             href="favicon-light.svg"
12 |             type="image/svg+xml"
13 |             media="(prefers-color-scheme: light)"
14 |         />
15 |         <link
16 |             rel="shortcut icon"
17 |             href="favicon-dark.svg"
18 |             type="image/svg+xml"
19 |             media="(prefers-color-scheme: dark)"
20 |         />
21 |         <title>Dashboard UI Design | XD Code</title>
22 |     </head>
23 |     <body>
24 |         <div id="root"></div>
25 |         <script
26 |             type="module"
27 |             src="/src/main.jsx"
28 |         ></script>
29 |     </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dashboard-ui-design",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@uidotdev/usehooks": "^2.4.1",
14 |     "clsx": "^2.1.1",
15 |     "lucide-react": "^0.441.0",
16 |     "react": "^18.3.1",
17 |     "react-dom": "^18.3.1",
18 |     "react-router-dom": "^6.26.2",
19 |     "recharts": "^2.12.7",
20 |     "tailwind-merge": "^2.5.2"
21 |   },
22 |   "devDependencies": {
23 |     "@eslint/js": "^9.9.0",
24 |     "@types/react": "^18.3.3",
25 |     "@types/react-dom": "^18.3.0",
26 |     "@vitejs/plugin-react": "^4.3.1",
27 |     "autoprefixer": "^10.4.20",
28 |     "eslint": "^9.9.0",
29 |     "eslint-plugin-react": "^7.35.0",
30 |     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
31 |     "eslint-plugin-react-refresh": "^0.4.9",
32 |     "globals": "^15.9.0",
33 |     "postcss": "^8.4.47",
34 |     "prettier": "^3.3.3",
35 |     "prettier-plugin-tailwindcss": "^0.6.6",
36 |     "tailwindcss": "^3.4.11",
37 |     "vite": "^5.4.1"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/Dashboard UI Design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xdcode2/dashboard-ui-design/7b2351229465ae7d039a61437274e5b6af3f52be/public/Dashboard UI Design.png


--------------------------------------------------------------------------------
/public/favicon-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M2 2H7C9.76142 2 12 4.23858 12 7V7C12 9.76142 9.76142 12 7 12H2V2Z" fill="#F8FAFC" />
3 |     <path d="M12 12C12 6.47715 16.4772 2 22 2V2V12H12V12Z" fill="#F8FAFC" />
4 |     <rect x="12" y="12" width="10" height="10" rx="5" fill="#F8FAFC" />
5 |     <rect x="2" y="12" width="10" height="10" fill="#F8FAFC" />
6 | </svg>


--------------------------------------------------------------------------------
/public/favicon-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M2 2H7C9.76142 2 12 4.23858 12 7C12 9.76142 9.76142 12 7 12H2V2Z" fill="#0F172A" />
3 |     <path d="M12 12C12 6.47715 16.4772 2 22 2V12H12Z" fill="#0F172A" />
4 |     <rect x="12" y="12" width="10" height="10" rx="5" fill="#0F172A" />
5 |     <rect x="2" y="12" width="10" height="10" fill="#0F172A" />
6 | </svg>


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { createBrowserRouter, RouterProvider } from "react-router-dom";
 2 | 
 3 | import { ThemeProvider } from "@/contexts/theme-context";
 4 | 
 5 | import Layout from "@/routes/layout";
 6 | import DashboardPage from "@/routes/dashboard/page";
 7 | 
 8 | function App() {
 9 |     const router = createBrowserRouter([
10 |         {
11 |             path: "/",
12 |             element: <Layout />,
13 |             children: [
14 |                 {
15 |                     index: true,
16 |                     element: <DashboardPage />,
17 |                 },
18 |                 {
19 |                     path: "analytics",
20 |                     element: <h1 className="title">Analytics</h1>,
21 |                 },
22 |                 {
23 |                     path: "reports",
24 |                     element: <h1 className="title">Reports</h1>,
25 |                 },
26 |                 {
27 |                     path: "customers",
28 |                     element: <h1 className="title">Customers</h1>,
29 |                 },
30 |                 {
31 |                     path: "new-customer",
32 |                     element: <h1 className="title">New Customer</h1>,
33 |                 },
34 |                 {
35 |                     path: "verified-customers",
36 |                     element: <h1 className="title">Verified Customers</h1>,
37 |                 },
38 |                 {
39 |                     path: "products",
40 |                     element: <h1 className="title">Products</h1>,
41 |                 },
42 |                 {
43 |                     path: "new-product",
44 |                     element: <h1 className="title">New Product</h1>,
45 |                 },
46 |                 {
47 |                     path: "inventory",
48 |                     element: <h1 className="title">Inventory</h1>,
49 |                 },
50 |                 {
51 |                     path: "settings",
52 |                     element: <h1 className="title">Settings</h1>,
53 |                 },
54 |             ],
55 |         },
56 |     ]);
57 | 
58 |     return (
59 |         <ThemeProvider storageKey="theme">
60 |             <RouterProvider router={router} />
61 |         </ThemeProvider>
62 |     );
63 | }
64 | 
65 | export default App;
66 | 


--------------------------------------------------------------------------------
/src/assets/logo-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M2 2H7C9.76142 2 12 4.23858 12 7V7C12 9.76142 9.76142 12 7 12H2V2Z" fill="#F8FAFC"/>
3 | <path d="M12 12C12 6.47715 16.4772 2 22 2V2V12H12V12Z" fill="#F8FAFC"/>
4 | <rect x="12" y="12" width="10" height="10" rx="5" fill="#F8FAFC"/>
5 | <rect x="2" y="12" width="10" height="10" fill="#F8FAFC"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/assets/logo-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M2 2H7C9.76142 2 12 4.23858 12 7C12 9.76142 9.76142 12 7 12H2V2Z" fill="#0F172A"/>
3 | <path d="M12 12C12 6.47715 16.4772 2 22 2V12H12Z" fill="#0F172A"/>
4 | <rect x="12" y="12" width="10" height="10" rx="5" fill="#0F172A"/>
5 | <rect x="2" y="12" width="10" height="10" fill="#0F172A"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/assets/product-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xdcode2/dashboard-ui-design/7b2351229465ae7d039a61437274e5b6af3f52be/src/assets/product-image.jpg


--------------------------------------------------------------------------------
/src/assets/profile-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xdcode2/dashboard-ui-design/7b2351229465ae7d039a61437274e5b6af3f52be/src/assets/profile-image.jpg


--------------------------------------------------------------------------------
/src/constants/index.jsx:
--------------------------------------------------------------------------------
  1 | import { ChartColumn, Home, NotepadText, Package, PackagePlus, Settings, ShoppingBag, UserCheck, UserPlus, Users } from "lucide-react";
  2 | 
  3 | import ProfileImage from "@/assets/profile-image.jpg";
  4 | import ProductImage from "@/assets/product-image.jpg";
  5 | 
  6 | export const navbarLinks = [
  7 |     {
  8 |         title: "Dashboard",
  9 |         links: [
 10 |             {
 11 |                 label: "Dashboard",
 12 |                 icon: Home,
 13 |                 path: "/",
 14 |             },
 15 |             {
 16 |                 label: "Analytics",
 17 |                 icon: ChartColumn,
 18 |                 path: "/analytics",
 19 |             },
 20 |             {
 21 |                 label: "Reports",
 22 |                 icon: NotepadText,
 23 |                 path: "/reports",
 24 |             },
 25 |         ],
 26 |     },
 27 |     {
 28 |         title: "Customers",
 29 |         links: [
 30 |             {
 31 |                 label: "Customers",
 32 |                 icon: Users,
 33 |                 path: "/customers",
 34 |             },
 35 |             {
 36 |                 label: "New customer",
 37 |                 icon: UserPlus,
 38 |                 path: "/new-customer",
 39 |             },
 40 |             {
 41 |                 label: "Verified customers",
 42 |                 icon: UserCheck,
 43 |                 path: "/verified-customers",
 44 |             },
 45 |         ],
 46 |     },
 47 |     {
 48 |         title: "Products",
 49 |         links: [
 50 |             {
 51 |                 label: "Products",
 52 |                 icon: Package,
 53 |                 path: "/products",
 54 |             },
 55 |             {
 56 |                 label: "New product",
 57 |                 icon: PackagePlus,
 58 |                 path: "/new-product",
 59 |             },
 60 |             {
 61 |                 label: "Inventory",
 62 |                 icon: ShoppingBag,
 63 |                 path: "/inventory",
 64 |             },
 65 |         ],
 66 |     },
 67 |     {
 68 |         title: "Settings",
 69 |         links: [
 70 |             {
 71 |                 label: "Settings",
 72 |                 icon: Settings,
 73 |                 path: "/settings",
 74 |             },
 75 |         ],
 76 |     },
 77 | ];
 78 | 
 79 | export const overviewData = [
 80 |     {
 81 |         name: "Jan",
 82 |         total: 1500,
 83 |     },
 84 |     {
 85 |         name: "Feb",
 86 |         total: 2000,
 87 |     },
 88 |     {
 89 |         name: "Mar",
 90 |         total: 1000,
 91 |     },
 92 |     {
 93 |         name: "Apr",
 94 |         total: 5000,
 95 |     },
 96 |     {
 97 |         name: "May",
 98 |         total: 2000,
 99 |     },
100 |     {
101 |         name: "Jun",
102 |         total: 5900,
103 |     },
104 |     {
105 |         name: "Jul",
106 |         total: 2000,
107 |     },
108 |     {
109 |         name: "Aug",
110 |         total: 5500,
111 |     },
112 |     {
113 |         name: "Sep",
114 |         total: 2000,
115 |     },
116 |     {
117 |         name: "Oct",
118 |         total: 4000,
119 |     },
120 |     {
121 |         name: "Nov",
122 |         total: 1500,
123 |     },
124 |     {
125 |         name: "Dec",
126 |         total: 2500,
127 |     },
128 | ];
129 | 
130 | export const recentSalesData = [
131 |     {
132 |         id: 1,
133 |         name: "Olivia Martin",
134 |         email: "olivia.martin@email.com",
135 |         image: ProfileImage,
136 |         total: 1500,
137 |     },
138 |     {
139 |         id: 2,
140 |         name: "James Smith",
141 |         email: "james.smith@email.com",
142 |         image: ProfileImage,
143 |         total: 2000,
144 |     },
145 |     {
146 |         id: 3,
147 |         name: "Sophia Brown",
148 |         email: "sophia.brown@email.com",
149 |         image: ProfileImage,
150 |         total: 4000,
151 |     },
152 |     {
153 |         id: 4,
154 |         name: "Noah Wilson",
155 |         email: "noah.wilson@email.com",
156 |         image: ProfileImage,
157 |         total: 3000,
158 |     },
159 |     {
160 |         id: 5,
161 |         name: "Emma Jones",
162 |         email: "emma.jones@email.com",
163 |         image: ProfileImage,
164 |         total: 2500,
165 |     },
166 |     {
167 |         id: 6,
168 |         name: "William Taylor",
169 |         email: "william.taylor@email.com",
170 |         image: ProfileImage,
171 |         total: 4500,
172 |     },
173 |     {
174 |         id: 7,
175 |         name: "Isabella Johnson",
176 |         email: "isabella.johnson@email.com",
177 |         image: ProfileImage,
178 |         total: 5300,
179 |     },
180 | ];
181 | 
182 | export const topProducts = [
183 |     {
184 |         number: 1,
185 |         name: "Wireless Headphones",
186 |         image: ProductImage,
187 |         description: "High-quality noise-canceling wireless headphones.",
188 |         price: 99.99,
189 |         status: "In Stock",
190 |         rating: 4.5,
191 |     },
192 |     {
193 |         number: 2,
194 |         name: "Smartphone",
195 |         image: ProductImage,
196 |         description: "Latest 5G smartphone with excellent camera features.",
197 |         price: 799.99,
198 |         status: "In Stock",
199 |         rating: 4.7,
200 |     },
201 |     {
202 |         number: 3,
203 |         name: "Gaming Laptop",
204 |         image: ProductImage,
205 |         description: "Powerful gaming laptop with high-end graphics.",
206 |         price: 1299.99,
207 |         status: "In Stock",
208 |         rating: 4.8,
209 |     },
210 |     {
211 |         number: 4,
212 |         name: "Smartwatch",
213 |         image: ProductImage,
214 |         description: "Stylish smartwatch with fitness tracking features.",
215 |         price: 199.99,
216 |         status: "Out of Stock",
217 |         rating: 4.4,
218 |     },
219 |     {
220 |         number: 5,
221 |         name: "Bluetooth Speaker",
222 |         image: ProductImage,
223 |         description: "Portable Bluetooth speaker with deep bass sound.",
224 |         price: 59.99,
225 |         status: "In Stock",
226 |         rating: 4.3,
227 |     },
228 |     {
229 |         number: 6,
230 |         name: "4K Monitor",
231 |         image: ProductImage,
232 |         description: "Ultra HD 4K monitor with stunning color accuracy.",
233 |         price: 399.99,
234 |         status: "In Stock",
235 |         rating: 4.6,
236 |     },
237 |     {
238 |         number: 7,
239 |         name: "Mechanical Keyboard",
240 |         image: ProductImage,
241 |         description: "Mechanical keyboard with customizable RGB lighting.",
242 |         price: 89.99,
243 |         status: "In Stock",
244 |         rating: 4.7,
245 |     },
246 |     {
247 |         number: 8,
248 |         name: "Wireless Mouse",
249 |         image: ProductImage,
250 |         description: "Ergonomic wireless mouse with precision tracking.",
251 |         price: 49.99,
252 |         status: "In Stock",
253 |         rating: 4.5,
254 |     },
255 |     {
256 |         number: 9,
257 |         name: "Action Camera",
258 |         image: ProductImage,
259 |         description: "Waterproof action camera with 4K video recording.",
260 |         price: 249.99,
261 |         status: "In Stock",
262 |         rating: 4.8,
263 |     },
264 |     {
265 |         number: 10,
266 |         name: "External Hard Drive",
267 |         image: ProductImage,
268 |         description: "Portable 2TB external hard drive for data storage.",
269 |         price: 79.99,
270 |         status: "Out of Stock",
271 |         rating: 4.5,
272 |     },
273 | ];
274 | 


--------------------------------------------------------------------------------
/src/contexts/theme-context.jsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useEffect, useState } from "react";
 2 | 
 3 | import PropTypes from "prop-types";
 4 | 
 5 | const initialState = {
 6 |     theme: "system",
 7 |     setTheme: () => null,
 8 | };
 9 | 
10 | export const ThemeProviderContext = createContext(initialState);
11 | 
12 | export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }) {
13 |     const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
14 | 
15 |     useEffect(() => {
16 |         const root = window.document.documentElement;
17 | 
18 |         root.classList.remove("light", "dark");
19 | 
20 |         if (theme === "system") {
21 |             const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
22 | 
23 |             root.classList.add(systemTheme);
24 |             return;
25 |         }
26 | 
27 |         root.classList.add(theme);
28 |     }, [theme]);
29 | 
30 |     const value = {
31 |         theme,
32 |         setTheme: (theme) => {
33 |             localStorage.setItem(storageKey, theme);
34 |             setTheme(theme);
35 |         },
36 |     };
37 | 
38 |     return (
39 |         <ThemeProviderContext.Provider
40 |             {...props}
41 |             value={value}
42 |         >
43 |             {children}
44 |         </ThemeProviderContext.Provider>
45 |     );
46 | }
47 | 
48 | ThemeProvider.propTypes = {
49 |     children: PropTypes.node,
50 |     defaultTheme: PropTypes.string,
51 |     storageKey: PropTypes.string,
52 | };
53 | 


--------------------------------------------------------------------------------
/src/hooks/use-click-outside.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | 
 3 | export const useClickOutside = (refs, callback) => {
 4 |     useEffect(() => {
 5 |         const handleOutsideClick = (event) => {
 6 |             const isOutside = refs.every((ref) => !ref?.current?.contains(event.target));
 7 | 
 8 |             if (isOutside && typeof callback === "function") {
 9 |                 callback(event);
10 |             }
11 |         };
12 | 
13 |         window.addEventListener("mousedown", handleOutsideClick);
14 | 
15 |         return () => {
16 |             window.removeEventListener("mousedown", handleOutsideClick);
17 |         };
18 |     }, [callback, refs]);
19 | };
20 | 


--------------------------------------------------------------------------------
/src/hooks/use-theme.jsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | 
 3 | import { ThemeProviderContext } from "@/contexts/theme-context";
 4 | 
 5 | export const useTheme = () => {
 6 |     const context = useContext(ThemeProviderContext);
 7 | 
 8 |     if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
 9 | 
10 |     return context;
11 | };
12 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |     body {
 7 |         @apply [scrollbar-color:_#cbd5e1_transparent] dark:[scrollbar-color:_#334155_transparent];
 8 |     }
 9 | }
10 | 
11 | @layer components {
12 |     .sidebar-group {
13 |         @apply flex w-full flex-col gap-y-2;
14 |     }
15 | 
16 |     .sidebar-group-title {
17 |         @apply overflow-hidden text-ellipsis text-sm font-medium text-slate-600 dark:text-slate-400;
18 |     }
19 | 
20 |     .sidebar-item {
21 |         @apply flex h-[40px] w-full flex-shrink-0 items-center gap-x-3 rounded-lg p-3 text-base font-medium text-slate-900 transition-colors hover:bg-blue-50 dark:text-slate-50 dark:hover:bg-blue-950;
22 |         &.active {
23 |             @apply bg-blue-500 text-slate-50 dark:bg-blue-600;
24 |         }
25 |     }
26 | 
27 |     .title {
28 |         @apply text-3xl font-semibold text-slate-900 transition-colors dark:text-slate-50;
29 |     }
30 | 
31 |     .btn-ghost {
32 |         @apply flex h-10 flex-shrink-0 items-center justify-center gap-x-2 rounded-lg p-2 text-slate-400 transition-colors hover:bg-blue-50 hover:text-slate-500 dark:hover:bg-blue-950 dark:hover:text-slate-300;
33 |     }
34 | 
35 |     .link {
36 |         @apply text-base font-medium text-slate-900 transition-colors hover:underline dark:text-slate-50;
37 |     }
38 | 
39 |     .input {
40 |         @apply hidden h-10 flex-shrink-0 items-center gap-x-2 rounded-lg border border-slate-300 px-2 text-base text-slate-900 transition-colors has-[input:focus]:border-blue-500 md:flex md:w-auto lg:w-80 dark:border-slate-700 dark:text-slate-50 dark:focus:border-blue-600;
41 |     }
42 | 
43 |     .card {
44 |         @apply flex flex-col gap-y-4 rounded-lg border border-slate-300 bg-white p-4 transition-colors dark:border-slate-700 dark:bg-slate-900;
45 |     }
46 | 
47 |     .card-header {
48 |         @apply flex items-center gap-x-2;
49 |     }
50 | 
51 |     .card-title {
52 |         @apply font-medium text-slate-900 transition-colors dark:text-slate-50;
53 |     }
54 | 
55 |     .card-body {
56 |         @apply flex flex-col gap-y-2 rounded-lg p-4;
57 |     }
58 | 
59 |     .table {
60 |         @apply h-full w-full text-slate-900 dark:text-slate-50;
61 |     }
62 | 
63 |     .table-header {
64 |         @apply sticky top-0 bg-slate-200 transition-[background] dark:bg-slate-800;
65 |     }
66 | 
67 |     .table-row {
68 |         @apply border-b border-slate-300 transition-colors last:border-none dark:border-slate-700;
69 |     }
70 | 
71 |     .table-head {
72 |         @apply h-12 px-4 text-start;
73 |     }
74 | 
75 |     .table-cell {
76 |         @apply w-fit whitespace-nowrap p-4 font-medium;
77 |     }
78 | }
79 | 
80 | .recharts-default-tooltip {
81 |     @apply !rounded-lg !border !border-slate-300 !bg-white transition-colors dark:!border-slate-700 dark:!bg-slate-900;
82 | }
83 | 
84 | .recharts-tooltip-label {
85 |     @apply text-base font-medium text-slate-900 dark:text-slate-50;
86 | }
87 | 
88 | .recharts-tooltip-item {
89 |     @apply text-base font-medium !text-blue-500 dark:!text-blue-600;
90 | }
91 | 


--------------------------------------------------------------------------------
/src/layouts/footer.jsx:
--------------------------------------------------------------------------------
 1 | export const Footer = () => {
 2 |     return (
 3 |         <footer className="flex flex-wrap items-center justify-between gap-4 pt-4">
 4 |             <p className="text-base font-medium text-slate-900 dark:text-slate-50">© 2024 XD Code All Rights Reserved</p>
 5 |             <div className="flex flex-wrap gap-x-2">
 6 |                 <a
 7 |                     href="#"
 8 |                     className="link"
 9 |                 >
10 |                     Privacy Policy
11 |                 </a>
12 |                 <a
13 |                     href="#"
14 |                     className="link"
15 |                 >
16 |                     Terms of Service
17 |                 </a>
18 |             </div>
19 |         </footer>
20 |     );
21 | };
22 | 


--------------------------------------------------------------------------------
/src/layouts/header.jsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "@/hooks/use-theme";
 2 | 
 3 | import { Bell, ChevronsLeft, Moon, Search, Sun } from "lucide-react";
 4 | 
 5 | import profileImg from "@/assets/profile-image.jpg";
 6 | 
 7 | import PropTypes from "prop-types";
 8 | 
 9 | export const Header = ({ collapsed, setCollapsed }) => {
10 |     const { theme, setTheme } = useTheme();
11 | 
12 |     return (
13 |         <header className="relative z-10 flex h-[60px] items-center justify-between bg-white px-4 shadow-md transition-colors dark:bg-slate-900">
14 |             <div className="flex items-center gap-x-3">
15 |                 <button
16 |                     className="btn-ghost size-10"
17 |                     onClick={() => setCollapsed(!collapsed)}
18 |                 >
19 |                     <ChevronsLeft className={collapsed && "rotate-180"} />
20 |                 </button>
21 |                 <div className="input">
22 |                     <Search
23 |                         size={20}
24 |                         className="text-slate-300"
25 |                     />
26 |                     <input
27 |                         type="text"
28 |                         name="search"
29 |                         id="search"
30 |                         placeholder="Search..."
31 |                         className="w-full bg-transparent text-slate-900 outline-0 placeholder:text-slate-300 dark:text-slate-50"
32 |                     />
33 |                 </div>
34 |             </div>
35 |             <div className="flex items-center gap-x-3">
36 |                 <button
37 |                     className="btn-ghost size-10"
38 |                     onClick={() => setTheme(theme === "light" ? "dark" : "light")}
39 |                 >
40 |                     <Sun
41 |                         size={20}
42 |                         className="dark:hidden"
43 |                     />
44 |                     <Moon
45 |                         size={20}
46 |                         className="hidden dark:block"
47 |                     />
48 |                 </button>
49 |                 <button className="btn-ghost size-10">
50 |                     <Bell size={20} />
51 |                 </button>
52 |                 <button className="size-10 overflow-hidden rounded-full">
53 |                     <img
54 |                         src={profileImg}
55 |                         alt="profile image"
56 |                         className="size-full object-cover"
57 |                     />
58 |                 </button>
59 |             </div>
60 |         </header>
61 |     );
62 | };
63 | 
64 | Header.propTypes = {
65 |     collapsed: PropTypes.bool,
66 |     setCollapsed: PropTypes.func,
67 | };
68 | 


--------------------------------------------------------------------------------
/src/layouts/sidebar.jsx:
--------------------------------------------------------------------------------
 1 | import { forwardRef } from "react";
 2 | import { NavLink } from "react-router-dom";
 3 | 
 4 | import { navbarLinks } from "@/constants";
 5 | 
 6 | import logoLight from "@/assets/logo-light.svg";
 7 | import logoDark from "@/assets/logo-dark.svg";
 8 | 
 9 | import { cn } from "@/utils/cn";
10 | 
11 | import PropTypes from "prop-types";
12 | 
13 | export const Sidebar = forwardRef(({ collapsed }, ref) => {
14 |     return (
15 |         <aside
16 |             ref={ref}
17 |             className={cn(
18 |                 "fixed z-[100] flex h-full w-[240px] flex-col overflow-x-hidden border-r border-slate-300 bg-white [transition:_width_300ms_cubic-bezier(0.4,_0,_0.2,_1),_left_300ms_cubic-bezier(0.4,_0,_0.2,_1),_background-color_150ms_cubic-bezier(0.4,_0,_0.2,_1),_border_150ms_cubic-bezier(0.4,_0,_0.2,_1)] dark:border-slate-700 dark:bg-slate-900",
19 |                 collapsed ? "md:w-[70px] md:items-center" : "md:w-[240px]",
20 |                 collapsed ? "max-md:-left-full" : "max-md:left-0",
21 |             )}
22 |         >
23 |             <div className="flex gap-x-3 p-3">
24 |                 <img
25 |                     src={logoLight}
26 |                     alt="Logoipsum"
27 |                     className="dark:hidden"
28 |                 />
29 |                 <img
30 |                     src={logoDark}
31 |                     alt="Logoipsum"
32 |                     className="hidden dark:block"
33 |                 />
34 |                 {!collapsed && <p className="text-lg font-medium text-slate-900 transition-colors dark:text-slate-50">Logoipsum</p>}
35 |             </div>
36 |             <div className="flex w-full flex-col gap-y-4 overflow-y-auto overflow-x-hidden p-3 [scrollbar-width:_thin]">
37 |                 {navbarLinks.map((navbarLink) => (
38 |                     <nav
39 |                         key={navbarLink.title}
40 |                         className={cn("sidebar-group", collapsed && "md:items-center")}
41 |                     >
42 |                         <p className={cn("sidebar-group-title", collapsed && "md:w-[45px]")}>{navbarLink.title}</p>
43 |                         {navbarLink.links.map((link) => (
44 |                             <NavLink
45 |                                 key={link.label}
46 |                                 to={link.path}
47 |                                 className={cn("sidebar-item", collapsed && "md:w-[45px]")}
48 |                             >
49 |                                 <link.icon
50 |                                     size={22}
51 |                                     className="flex-shrink-0"
52 |                                 />
53 |                                 {!collapsed && <p className="whitespace-nowrap">{link.label}</p>}
54 |                             </NavLink>
55 |                         ))}
56 |                     </nav>
57 |                 ))}
58 |             </div>
59 |         </aside>
60 |     );
61 | });
62 | 
63 | Sidebar.displayName = "Sidebar";
64 | 
65 | Sidebar.propTypes = {
66 |     collapsed: PropTypes.bool,
67 | };
68 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | createRoot(document.getElementById('root')).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/routes/dashboard/page.jsx:
--------------------------------------------------------------------------------
  1 | import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
  2 | 
  3 | import { useTheme } from "@/hooks/use-theme";
  4 | 
  5 | import { overviewData, recentSalesData, topProducts } from "@/constants";
  6 | 
  7 | import { Footer } from "@/layouts/footer";
  8 | 
  9 | import { CreditCard, DollarSign, Package, PencilLine, Star, Trash, TrendingUp, Users } from "lucide-react";
 10 | 
 11 | const DashboardPage = () => {
 12 |     const { theme } = useTheme();
 13 | 
 14 |     return (
 15 |         <div className="flex flex-col gap-y-4">
 16 |             <h1 className="title">Dashboard</h1>
 17 |             <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 18 |                 <div className="card">
 19 |                     <div className="card-header">
 20 |                         <div className="w-fit rounded-lg bg-blue-500/20 p-2 text-blue-500 transition-colors dark:bg-blue-600/20 dark:text-blue-600">
 21 |                             <Package size={26} />
 22 |                         </div>
 23 |                         <p className="card-title">Total Products</p>
 24 |                     </div>
 25 |                     <div className="card-body bg-slate-100 transition-colors dark:bg-slate-950">
 26 |                         <p className="text-3xl font-bold text-slate-900 transition-colors dark:text-slate-50">25,154</p>
 27 |                         <span className="flex w-fit items-center gap-x-2 rounded-full border border-blue-500 px-2 py-1 font-medium text-blue-500 dark:border-blue-600 dark:text-blue-600">
 28 |                             <TrendingUp size={18} />
 29 |                             25%
 30 |                         </span>
 31 |                     </div>
 32 |                 </div>
 33 |                 <div className="card">
 34 |                     <div className="card-header">
 35 |                         <div className="rounded-lg bg-blue-500/20 p-2 text-blue-500 transition-colors dark:bg-blue-600/20 dark:text-blue-600">
 36 |                             <DollarSign size={26} />
 37 |                         </div>
 38 |                         <p className="card-title">Total Paid Orders</p>
 39 |                     </div>
 40 |                     <div className="card-body bg-slate-100 transition-colors dark:bg-slate-950">
 41 |                         <p className="text-3xl font-bold text-slate-900 transition-colors dark:text-slate-50">$16,000</p>
 42 |                         <span className="flex w-fit items-center gap-x-2 rounded-full border border-blue-500 px-2 py-1 font-medium text-blue-500 dark:border-blue-600 dark:text-blue-600">
 43 |                             <TrendingUp size={18} />
 44 |                             12%
 45 |                         </span>
 46 |                     </div>
 47 |                 </div>
 48 |                 <div className="card">
 49 |                     <div className="card-header">
 50 |                         <div className="rounded-lg bg-blue-500/20 p-2 text-blue-500 transition-colors dark:bg-blue-600/20 dark:text-blue-600">
 51 |                             <Users size={26} />
 52 |                         </div>
 53 |                         <p className="card-title">Total Customers</p>
 54 |                     </div>
 55 |                     <div className="card-body bg-slate-100 transition-colors dark:bg-slate-950">
 56 |                         <p className="text-3xl font-bold text-slate-900 transition-colors dark:text-slate-50">15,400k</p>
 57 |                         <span className="flex w-fit items-center gap-x-2 rounded-full border border-blue-500 px-2 py-1 font-medium text-blue-500 dark:border-blue-600 dark:text-blue-600">
 58 |                             <TrendingUp size={18} />
 59 |                             15%
 60 |                         </span>
 61 |                     </div>
 62 |                 </div>
 63 |                 <div className="card">
 64 |                     <div className="card-header">
 65 |                         <div className="rounded-lg bg-blue-500/20 p-2 text-blue-500 transition-colors dark:bg-blue-600/20 dark:text-blue-600">
 66 |                             <CreditCard size={26} />
 67 |                         </div>
 68 |                         <p className="card-title">Sales</p>
 69 |                     </div>
 70 |                     <div className="card-body bg-slate-100 transition-colors dark:bg-slate-950">
 71 |                         <p className="text-3xl font-bold text-slate-900 transition-colors dark:text-slate-50">12,340</p>
 72 |                         <span className="flex w-fit items-center gap-x-2 rounded-full border border-blue-500 px-2 py-1 font-medium text-blue-500 dark:border-blue-600 dark:text-blue-600">
 73 |                             <TrendingUp size={18} />
 74 |                             19%
 75 |                         </span>
 76 |                     </div>
 77 |                 </div>
 78 |             </div>
 79 |             <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-7">
 80 |                 <div className="card col-span-1 md:col-span-2 lg:col-span-4">
 81 |                     <div className="card-header">
 82 |                         <p className="card-title">Overview</p>
 83 |                     </div>
 84 |                     <div className="card-body p-0">
 85 |                         <ResponsiveContainer
 86 |                             width="100%"
 87 |                             height={300}
 88 |                         >
 89 |                             <AreaChart
 90 |                                 data={overviewData}
 91 |                                 margin={{
 92 |                                     top: 0,
 93 |                                     right: 0,
 94 |                                     left: 0,
 95 |                                     bottom: 0,
 96 |                                 }}
 97 |                             >
 98 |                                 <defs>
 99 |                                     <linearGradient
100 |                                         id="colorTotal"
101 |                                         x1="0"
102 |                                         y1="0"
103 |                                         x2="0"
104 |                                         y2="1"
105 |                                     >
106 |                                         <stop
107 |                                             offset="5%"
108 |                                             stopColor="#2563eb"
109 |                                             stopOpacity={0.8}
110 |                                         />
111 |                                         <stop
112 |                                             offset="95%"
113 |                                             stopColor="#2563eb"
114 |                                             stopOpacity={0}
115 |                                         />
116 |                                     </linearGradient>
117 |                                 </defs>
118 |                                 <Tooltip
119 |                                     cursor={false}
120 |                                     formatter={(value) => `$${value}`}
121 |                                 />
122 | 
123 |                                 <XAxis
124 |                                     dataKey="name"
125 |                                     strokeWidth={0}
126 |                                     stroke={theme === "light" ? "#475569" : "#94a3b8"}
127 |                                     tickMargin={6}
128 |                                 />
129 |                                 <YAxis
130 |                                     dataKey="total"
131 |                                     strokeWidth={0}
132 |                                     stroke={theme === "light" ? "#475569" : "#94a3b8"}
133 |                                     tickFormatter={(value) => `$${value}`}
134 |                                     tickMargin={6}
135 |                                 />
136 | 
137 |                                 <Area
138 |                                     type="monotone"
139 |                                     dataKey="total"
140 |                                     stroke="#2563eb"
141 |                                     fillOpacity={1}
142 |                                     fill="url(#colorTotal)"
143 |                                 />
144 |                             </AreaChart>
145 |                         </ResponsiveContainer>
146 |                     </div>
147 |                 </div>
148 |                 <div className="card col-span-1 md:col-span-2 lg:col-span-3">
149 |                     <div className="card-header">
150 |                         <p className="card-title">Recent Sales</p>
151 |                     </div>
152 |                     <div className="card-body h-[300px] overflow-auto p-0">
153 |                         {recentSalesData.map((sale) => (
154 |                             <div
155 |                                 key={sale.id}
156 |                                 className="flex items-center justify-between gap-x-4 py-2 pr-2"
157 |                             >
158 |                                 <div className="flex items-center gap-x-4">
159 |                                     <img
160 |                                         src={sale.image}
161 |                                         alt={sale.name}
162 |                                         className="size-10 flex-shrink-0 rounded-full object-cover"
163 |                                     />
164 |                                     <div className="flex flex-col gap-y-2">
165 |                                         <p className="font-medium text-slate-900 dark:text-slate-50">{sale.name}</p>
166 |                                         <p className="text-sm text-slate-600 dark:text-slate-400">{sale.email}</p>
167 |                                     </div>
168 |                                 </div>
169 |                                 <p className="font-medium text-slate-900 dark:text-slate-50">${sale.total}</p>
170 |                             </div>
171 |                         ))}
172 |                     </div>
173 |                 </div>
174 |             </div>
175 |             <div className="card">
176 |                 <div className="card-header">
177 |                     <p className="card-title">Top Orders</p>
178 |                 </div>
179 |                 <div className="card-body p-0">
180 |                     <div className="relative h-[500px] w-full flex-shrink-0 overflow-auto rounded-none [scrollbar-width:_thin]">
181 |                         <table className="table">
182 |                             <thead className="table-header">
183 |                                 <tr className="table-row">
184 |                                     <th className="table-head">#</th>
185 |                                     <th className="table-head">Product</th>
186 |                                     <th className="table-head">Price</th>
187 |                                     <th className="table-head">Status</th>
188 |                                     <th className="table-head">Rating</th>
189 |                                     <th className="table-head">Actions</th>
190 |                                 </tr>
191 |                             </thead>
192 |                             <tbody className="table-body">
193 |                                 {topProducts.map((product) => (
194 |                                     <tr
195 |                                         key={product.number}
196 |                                         className="table-row"
197 |                                     >
198 |                                         <td className="table-cell">{product.number}</td>
199 |                                         <td className="table-cell">
200 |                                             <div className="flex w-max gap-x-4">
201 |                                                 <img
202 |                                                     src={product.image}
203 |                                                     alt={product.name}
204 |                                                     className="size-14 rounded-lg object-cover"
205 |                                                 />
206 |                                                 <div className="flex flex-col">
207 |                                                     <p>{product.name}</p>
208 |                                                     <p className="font-normal text-slate-600 dark:text-slate-400">{product.description}</p>
209 |                                                 </div>
210 |                                             </div>
211 |                                         </td>
212 |                                         <td className="table-cell">${product.price}</td>
213 |                                         <td className="table-cell">{product.status}</td>
214 |                                         <td className="table-cell">
215 |                                             <div className="flex items-center gap-x-2">
216 |                                                 <Star
217 |                                                     size={18}
218 |                                                     className="fill-yellow-600 stroke-yellow-600"
219 |                                                 />
220 |                                                 {product.rating}
221 |                                             </div>
222 |                                         </td>
223 |                                         <td className="table-cell">
224 |                                             <div className="flex items-center gap-x-4">
225 |                                                 <button className="text-blue-500 dark:text-blue-600">
226 |                                                     <PencilLine size={20} />
227 |                                                 </button>
228 |                                                 <button className="text-red-500">
229 |                                                     <Trash size={20} />
230 |                                                 </button>
231 |                                             </div>
232 |                                         </td>
233 |                                     </tr>
234 |                                 ))}
235 |                             </tbody>
236 |                         </table>
237 |                     </div>
238 |                 </div>
239 |             </div>
240 |             <Footer />
241 |         </div>
242 |     );
243 | };
244 | 
245 | export default DashboardPage;
246 | 


--------------------------------------------------------------------------------
/src/routes/layout.jsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | 
 3 | import { useMediaQuery } from "@uidotdev/usehooks";
 4 | import { useClickOutside } from "@/hooks/use-click-outside";
 5 | 
 6 | import { Sidebar } from "@/layouts/sidebar";
 7 | import { Header } from "@/layouts/header";
 8 | 
 9 | import { cn } from "@/utils/cn";
10 | import { useEffect, useRef, useState } from "react";
11 | 
12 | const Layout = () => {
13 |     const isDesktopDevice = useMediaQuery("(min-width: 768px)");
14 |     const [collapsed, setCollapsed] = useState(!isDesktopDevice);
15 | 
16 |     const sidebarRef = useRef(null);
17 | 
18 |     useEffect(() => {
19 |         setCollapsed(!isDesktopDevice);
20 |     }, [isDesktopDevice]);
21 | 
22 |     useClickOutside([sidebarRef], () => {
23 |         if (!isDesktopDevice && !collapsed) {
24 |             setCollapsed(true);
25 |         }
26 |     });
27 | 
28 |     return (
29 |         <div className="min-h-screen bg-slate-100 transition-colors dark:bg-slate-950">
30 |             <div
31 |                 className={cn(
32 |                     "pointer-events-none fixed inset-0 -z-10 bg-black opacity-0 transition-opacity",
33 |                     !collapsed && "max-md:pointer-events-auto max-md:z-50 max-md:opacity-30",
34 |                 )}
35 |             />
36 |             <Sidebar
37 |                 ref={sidebarRef}
38 |                 collapsed={collapsed}
39 |             />
40 |             <div className={cn("transition-[margin] duration-300", collapsed ? "md:ml-[70px]" : "md:ml-[240px]")}>
41 |                 <Header
42 |                     collapsed={collapsed}
43 |                     setCollapsed={setCollapsed}
44 |                 />
45 |                 <div className="h-[calc(100vh-60px)] overflow-y-auto overflow-x-hidden p-6">
46 |                     <Outlet />
47 |                 </div>
48 |             </div>
49 |         </div>
50 |     );
51 | };
52 | 
53 | export default Layout;
54 | 


--------------------------------------------------------------------------------
/src/utils/cn.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs) {
5 |     return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 4 |     darkMode: "class",
 5 |     theme: {
 6 |         extend: {},
 7 |     },
 8 |     plugins: [],
 9 | };
10 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import path from "path";
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |     plugins: [react()],
 8 |     server: {
 9 |         port: 3000,
10 |     },
11 |     resolve: {
12 |         alias: {
13 |             "@": path.resolve(__dirname, "./src"),
14 |         },
15 |     },
16 | });
17 | 


--------------------------------------------------------------------------------