feat: move theme selection to settings page

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",

src/components/layout/app-sidebar.tsx

@@ -152,9 +152,8 @@ export function AppSidebar() {
         </SidebarGroup>
       </SidebarContent >
 
-      <SidebarFooter className="flex items-end justify-end border-t">
-        <DarkModeToggle />
-      </SidebarFooter>
+      {/* <SidebarFooter className="flex items-end justify-end border-t">
+      </SidebarFooter> */}
 
       <SidebarRail />
     </Sidebar >

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 (
-    <div className="p-4">
-      <h1 className="text-xl font-semibold font-mono">
-        config.json
-      </h1>
-      <pre className="bg-secondary rounded-lg p-4 mt-4">
-        {JSON.stringify(config, null, 2)}
-      </pre>
+    <div className="p-4 max-w-3xl mx-auto gap-8 flex flex-col">
+      <div className="border-b">
+        <h1 className="text-2xl py-4 font-semibold">
+          Settings
+        </h1>
+      </div>
+
+      <section className="border-b">
+        <h2 className="text-xl">
+          Appearance
+        </h2>
+        <div className="mt-4">
+          <fieldset className="py-4">
+            <legend className="text-sm font-medium leading-none text-foreground">
+              Interface theme
+            </legend>
+            <ThemeSelect />
+          </fieldset>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-xl">
+          Configuration
+        </h2>
+        <pre className="bg-accent rounded-lg p-4 mt-4 grow">
+          {JSON.stringify(config, null, 2)}
+        </pre>
+      </section>
     </div>
   )
 }
+

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 (
+
+    <RadioGroup value={theme} onValueChange={setTheme} className="flex gap-3" defaultValue="r1">
+      {items.map((item) => (
+        <label key={item.id}>
+          <RadioGroupItem
+            id={item.id}
+            value={item.value}
+            className="peer sr-only after:absolute after:inset-0"
+          />
+          <Image
+            src={item.image}
+            alt={item.label}
+            width={88}
+            height={70}
+            className="relative cursor-pointer overflow-hidden rounded-lg border border-input shadow-sm shadow-black/5 ring-offset-background transition-colors peer-[:focus-visible]:ring-2 peer-[:focus-visible]:ring-ring/70 peer-[:focus-visible]:ring-offset-2 peer-data-[disabled]:cursor-not-allowed peer-data-[state=checked]:border-ring peer-data-[state=checked]:bg-accent peer-data-[disabled]:opacity-50"
+          />
+          <span className="group mt-2 flex items-center gap-1 peer-data-[state=unchecked]:text-muted-foreground/70">
+            <Check
+              size={16}
+              strokeWidth={2}
+              className="peer-data-[state=unchecked]:group-[]:hidden"
+              aria-hidden="true"
+            />
+            <Minus
+              size={16}
+              strokeWidth={2}
+              className="peer-data-[state=checked]:group-[]:hidden"
+              aria-hidden="true"
+            />
+            <span className="text-xs font-medium">{item.label}</span>
+          </span>
+        </label>
+      ))}
+    </RadioGroup>
+  )
+}

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<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }