diff --git a/package.json b/package.json index 388d44e..04dec1e 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@radix-ui/react-collapsible": "^1.1.1", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", + "@radix-ui/react-radio-group": "^1.2.1", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 793ba91..40acf48 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@radix-ui/react-dropdown-menu': specifier: ^2.1.2 version: 2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-radio-group': + specifier: ^1.2.1 + version: 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028) '@radix-ui/react-select': specifier: ^2.1.2 version: 2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028) @@ -582,6 +585,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-radio-group@1.2.1': + resolution: {integrity: sha512-kdbv54g4vfRjja9DNWPMxKvXblzqbpEC8kspEkZ6dVP7kQksGCn+iZHkcCz2nb00+lPdRvxrqy4WrvvV1cNqrQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-roving-focus@1.1.0': resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==} peerDependencies: @@ -2634,6 +2650,24 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-radio-group@1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-02c0e824-20241028) + '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-02c0e824-20241028) + react: 19.0.0-rc-02c0e824-20241028 + react-dom: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028)': dependencies: '@radix-ui/primitive': 1.1.0 diff --git a/src/assets/images/ui-dark.png b/src/assets/images/ui-dark.png new file mode 100644 index 0000000..31f4a04 Binary files /dev/null and b/src/assets/images/ui-dark.png differ diff --git a/src/assets/images/ui-light.png b/src/assets/images/ui-light.png new file mode 100644 index 0000000..f299b0d Binary files /dev/null and b/src/assets/images/ui-light.png differ diff --git a/src/assets/images/ui-system.png b/src/assets/images/ui-system.png new file mode 100644 index 0000000..db1c573 Binary files /dev/null and b/src/assets/images/ui-system.png differ diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx index d3e8db0..2ac956f 100644 --- a/src/components/layout/app-sidebar.tsx +++ b/src/components/layout/app-sidebar.tsx @@ -152,9 +152,8 @@ export function AppSidebar() { - - - + {/* + */} diff --git a/src/components/layout/dark-mode-toggle.tsx b/src/components/layout/dark-mode-toggle.tsx deleted file mode 100644 index 029f2e1..0000000 --- a/src/components/layout/dark-mode-toggle.tsx +++ /dev/null @@ -1,40 +0,0 @@ -"use client" - -import * as React from "react" -import { Moon, Sun } from "lucide-react" -import { useTheme } from "next-themes" - -import { Button } from "@/components/ui/button" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" - -export function DarkModeToggle() { - const { setTheme } = useTheme() - - return ( - - - - - - setTheme("light")}> - Light - - setTheme("dark")}> - Dark - - setTheme("system")}> - System - - - - ) -} diff --git a/src/components/settings/template.tsx b/src/components/settings/template.tsx index 9a6568a..196aa17 100644 --- a/src/components/settings/template.tsx +++ b/src/components/settings/template.tsx @@ -1,17 +1,41 @@ 'use client' import { useConfig } from "@/contexts/config" +import ThemeSelect from "./theme-select" export function SettginsTemplate() { const { config } = useConfig() return ( -
-

- config.json -

- 
-        {JSON.stringify(config, null, 2)}
-
+
+
+

+ Settings +

+
+ +
+

+ Appearance +

+
+
+ + Interface theme + + +
+
+
+ +
+

+ Configuration +

+ 
+          {JSON.stringify(config, null, 2)}
+
+
) } + diff --git a/src/components/settings/theme-select.tsx b/src/components/settings/theme-select.tsx new file mode 100644 index 0000000..f805a57 --- /dev/null +++ b/src/components/settings/theme-select.tsx @@ -0,0 +1,55 @@ +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" +import UiDark from "@/assets/images/ui-dark.png" +import UiLight from "@/assets/images/ui-light.png" +import UiSystem from "@/assets/images/ui-system.png" +import { Check, Minus } from "lucide-react" +import Image from "next/image" +import { useTheme } from "next-themes" + +const items = [ + { id: "radio-18-r1", value: "light", label: "Light", image: UiLight }, + { id: "radio-18-r2", value: "dark", label: "Dark", image: UiDark }, + { id: "radio-18-r3", value: "system", label: "System", image: UiSystem }, +] + + +export default function ThemeSelect() { + const { setTheme, theme } = useTheme() + + return ( + + + {items.map((item) => ( + + ))} + + ) +} diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx new file mode 100644 index 0000000..e9bde17 --- /dev/null +++ b/src/components/ui/radio-group.tsx @@ -0,0 +1,44 @@ +"use client" + +import * as React from "react" +import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" +import { Circle } from "lucide-react" + +import { cn } from "@/lib/utils" + +const RadioGroup = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +RadioGroup.displayName = RadioGroupPrimitive.Root.displayName + +const RadioGroupItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + + + + + ) +}) +RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName + +export { RadioGroup, RadioGroupItem }