diff --git a/package.json b/package.json index a8dc365..fb9d913 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@base-ui-components/react": "^1.0.0-beta.3", + "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-slot": "^1.2.3", "@tabler/icons-react": "^3.35.0", "@tailwindcss/vite": "^4.1.13", @@ -35,6 +36,7 @@ "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", + "tailwind-scrollbar": "^4.0.2", "tw-animate-css": "^1.3.8", "typescript": "~5.8.3", "typescript-eslint": "^8.39.1", diff --git a/src/App.tsx b/src/App.tsx index da67ec0..9b73633 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,19 @@ -import Topbar from './components/Topbar'; -import PageContainer from './components/PageContainer'; -import Sidebar from './components/Sidebar'; -import { ThemeButton } from './components/ThemeButton'; +import Topbar from '@/components/Topbar'; +import PageContainer from '@/components/PageContainer'; +import Sidebar from '@/components/Sidebar'; +import { FullscreenWrapper, ColumnWrapper } from '@/components/ui/Wrappers'; +import { ThemeButton } from '@/components/ThemeButton'; const App = () => { return ( -
+ -
+ -
-
- -
-
+ + + ); }; diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx index 37a20a1..d296d9d 100644 --- a/src/components/PageContainer.tsx +++ b/src/components/PageContainer.tsx @@ -1,5 +1,7 @@ import { Routes, Route } from 'react-router-dom'; +import { ContainerWrapper } from '@/components/ui/Wrappers'; + import Home from './pages/Home'; import Dashboard from './pages/Dashboard'; import Todos from './pages/Todos'; @@ -7,12 +9,14 @@ import NotFound from './pages/default/NotFound'; const PageContainer = () => { return ( - - } /> - } /> - } /> - } /> - + + + } /> + } /> + } /> + } /> + + ); }; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 10cce81..9fffeca 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -19,7 +19,7 @@ const Sidebar = () => { const location = useLocation(); return (