diff --git a/apps/web/index.html b/apps/web/index.html index 47cefdc..4a1e835 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -1,5 +1,5 @@ - + diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx index 2544454..430d540 100644 --- a/apps/web/src/components/layout/app-shell.tsx +++ b/apps/web/src/components/layout/app-shell.tsx @@ -37,6 +37,8 @@ import { Separator } from '@cfdm/ui/components/separator' import { Link, useRouterState } from '@tanstack/react-router' import type { ReactNode } from 'react' +import { ModeToggle } from '@/components/mode-toggle' + interface NavItem { to: string label: string @@ -68,15 +70,22 @@ export function AppShell({ children }: { children: ReactNode }) { -
-
- -
-
- VPS Tracker - Учёт виртуальных серверов -
-
+ + + }> +
+ +
+
+ VPS Tracker + Учёт виртуальных серверов +
+ + + @@ -116,6 +125,9 @@ export function AppShell({ children }: { children: ReactNode }) { +
+ +
{children}
diff --git a/apps/web/src/components/mode-toggle.tsx b/apps/web/src/components/mode-toggle.tsx new file mode 100644 index 0000000..b7059fc --- /dev/null +++ b/apps/web/src/components/mode-toggle.tsx @@ -0,0 +1,29 @@ +import { Moon, Sun } from 'lucide-react' +import { useTheme } from 'next-themes' + +import { Button } from '@cfdm/ui/components/button' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@cfdm/ui/components/dropdown-menu' + +export function ModeToggle() { + const { setTheme } = useTheme() + + return ( + + }> + + + Сменить тему + + + setTheme('light')}>Светлая + setTheme('dark')}>Тёмная + setTheme('system')}>Системная + + + ) +} diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx new file mode 100644 index 0000000..702c7e0 --- /dev/null +++ b/apps/web/src/components/theme-provider.tsx @@ -0,0 +1,15 @@ +import { ThemeProvider as NextThemesProvider } from 'next-themes' +import type { ReactNode } from 'react' + +export function ThemeProvider({ children }: { children: ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx index c38d918..1f93d91 100644 --- a/apps/web/src/main.tsx +++ b/apps/web/src/main.tsx @@ -8,6 +8,7 @@ import '@cfdm/ui/globals.css' import { queryClient } from '@/lib/queryClient' import { createRouter } from '@/lib/router' +import { ThemeProvider } from '@/components/theme-provider' const router = createRouter({ context: { queryClient } }) @@ -16,9 +17,11 @@ if (!rootEl) throw new Error('Root element #root not found') createRoot(rootEl).render( - - - - + + + + + + , )