From 56905f7e201aa7b4b9ea473bca852b9cb301ea3c Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 6 Mar 2025 23:25:23 +0800
Subject: [PATCH] feat(settings-dialog): replace placeholder content with
 AppearanceSettings component

---
 src/components/settings-dialog.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/settings-dialog.tsx b/src/components/settings-dialog.tsx
index 8ce1bf8..df4c181 100644
--- a/src/components/settings-dialog.tsx
+++ b/src/components/settings-dialog.tsx
@@ -25,6 +25,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import AppearanceSettings from "./appearance-settings";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useSettingNavStore } from "@/store/useSettingNavStore";
 import { CodeXml, Globe, Paintbrush, Settings } from "lucide-react";
@@ -58,7 +59,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
             <SidebarContent>
               <SidebarGroup>
                 <SidebarGroupContent>
-                  <SidebarMenu>
+                  <SidebarMenu className="pt-2">
                     {data.nav.map((item) => (
                       <SidebarMenuItem key={item.name}>
                         <SidebarMenuButton
@@ -96,12 +97,16 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
             </header>
             <ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
               <div className="flex flex-col gap-4">
-                {Array.from({ length: 10 }).map((_, i) => (
-                  <div
-                    key={i}
-                    className="aspect-video max-w-3xl rounded-xl bg-muted/50"
-                  />
-                ))}
+                {activeNav === "Appearance" ? (
+                  <AppearanceSettings />
+                ) : (
+                  Array.from({ length: 10 }).map((_, i) => (
+                    <div
+                      key={i}
+                      className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                    />
+                  ))
+                )}
               </div>
             </ScrollArea>
           </main>