From d5dfeac9c0656d35bd59889625b4fba8b9a1188b Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Wed, 30 Jul 2025 10:56:09 +0100
Subject: [PATCH] add description to settings pages

---
 src/components/dashboard/Settings.tsx | 28 +++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/Settings.tsx b/src/components/dashboard/Settings.tsx
index d502841..104d316 100644
--- a/src/components/dashboard/Settings.tsx
+++ b/src/components/dashboard/Settings.tsx
@@ -59,10 +59,26 @@ export default component$(() => {
     });
 
     const categories = useSignal([
-        { name: "storage & plan", component: StorageAndPlan },
-        { name: "api & integrations", component: Integrations },
-        { name: "privacy & security", component: PrivacyAndSecurity },
-        { name: "danger zone", component: DangerZone }
+        {
+            name: "storage & plan",
+            description: "manage your storage and plan details",
+            component: StorageAndPlan
+        },
+        {
+            name: "api & integrations",
+            description: "manage your api keys and integrations",
+            component: Integrations
+        },
+        {
+            name: "privacy & security",
+            description: "manage your privacy settings and security options",
+            component: PrivacyAndSecurity
+        },
+        {
+            name: "danger zone",
+            description: "delete your account and data",
+            component: DangerZone
+        }
     ])
 
     const selectedCategory = useSignal(0);
@@ -107,13 +123,13 @@ export default component$(() => {
                                 onClick$={() => (selectedCategory.value = i)}
                             >
                                 <h2 class="text-lg">{category.name}</h2>
-                                <p class="text-sm text-white/25">description</p>
+                                <p class="text-sm text-white/25">{category.description}</p>
                             </div>
                         ))}
                     </div>
                 </div>
                 <div class="flex flex-col flex-3/4 text-lg overflow-clip">
-                    <h1 class="text-2xl mb-2 text-white/75">{categories.value[selectedCategory.value].name}</h1>
+                    <h1 class="text-2xl mb-2">{categories.value[selectedCategory.value].name}</h1>
                     <SelectedComponent.value />
                 </div>
             </div>