new settings layout

src/components/dashboard/Settings.tsx

@@ -1,24 +1,111 @@
-import { component$ } from "@builder.io/qwik";
+// import { component$ } from "@builder.io/qwik";
+// import { useNanostore$ } from "~/hooks/nanostores";
+// import { isSettingsOpen, userInfo } from "~/lib/stores";
+// import { StereoUser } from "~/lib/types";
+
+import { component$, useComputed$, useSignal, useTask$ } from "@builder.io/qwik";
 import { useNanostore$ } from "~/hooks/nanostores";
-import { isSettingsOpen, userInfo } from "~/lib/stores";
-import { StereoUser } from "~/lib/types";
+import { isSettingsOpen } from "~/lib/stores";
+
+const StorageAndPlan = component$(() => {
+    return (
+        <div>
+            <p>current plan: stereo free</p>
+        </div>
+    );
+});
+
+const Integrations = component$(() => {
+    return (
+        <div>
+            <p>manage your api keys and integrations here</p>
+        </div>
+    );
+});
+
+const PrivacyAndSecurity = component$(() => {
+    return (
+        <div>
+            <p>manage your privacy settings and security options</p>
+        </div>
+    );
+});
+
 
 export default component$(() => {
-    const info = useNanostore$<StereoUser>(userInfo);
     const open = useNanostore$<boolean>(isSettingsOpen);
-    if (open.value) return (
-        <div onClick$={() => open.value = false} class="z-[50] absolute flex w-full h-screen items-center justify-center backdrop-blur-3xl bg-black/50 text-white text-6xl">
-            <div onClick$={e => e.stopPropagation()} class="flex gap-8 bg-black/50 p-8 rounded-3xl shadow-lg w-4/7 h-4/7">
-                <div class="flex flex-col flex-1/4 border-r-2 border-white/25">
-                    <h1 class="text-2xl">settings</h1>
-                </div>
+    const visible = useSignal(false);
+    const shouldRender = useSignal(open.value);
 
-                <div class="flex flex-col flex-3/4">
-                    <h1 class="text-2xl">content</h1>
+    useTask$(({ track }) => {
+        track(() => open.value);
+        if (open.value) {
+            shouldRender.value = true;
+            setTimeout(() => { visible.value = true; }, 10);
+        } else {
+            visible.value = false;
+            setTimeout(() => { shouldRender.value = false; }, 300);
+        }
+    });
+
+    const categories = useSignal([
+        { name: "storage & plan", component: StorageAndPlan },
+        { name: "api & integrations" , component: Integrations },
+        { name: "privacy & security" , component: PrivacyAndSecurity }
+    ])
+
+    const selectedCategory = useSignal(0);
+    const SelectedComponent = useComputed$(() => {
+        return categories.value[selectedCategory.value].component;
+    });
+
+    if (!shouldRender.value) return <></>;
+    return (
+        <div
+            onClick$={() => (open.value = false)}
+            style={{
+                opacity: visible.value ? 1 : 0,
+            }}
+            class="z-[50] fixed inset-0 flex items-center justify-center bg-black/50 text-white text-6xl backdrop-blur-3xl transition-opacity duration-300"
+        >
+            <div
+                data-aos="fade-up"
+                data-aos-duration="400"
+                data-aos-anchor-placement="top-center"
+                data-aos-easing="ease-out-quad"
+                style={{
+                    border: "0.5px solid #FF264E",
+                    boxShadow:
+                        "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
+                }}
+                onClick$={e => e.stopPropagation()}
+                class="flex gap-8 bg-black/30 bg-gradient-to-t from-stereo/20 to-transparent p-8 rounded-3xl shadow-lg w-4/7 h-4/7"
+            >
+                <div class="flex flex-col justify-between flex-1/4 border-r-2 border-white/25">
+                    <h1 class="text-2xl">settings</h1>
+                    <div>
+                        {categories.value.map((category, i) => (
+                            <div
+                                key={category.name}
+                                class={[
+                                    "group py-2 px-3 transition-colors cursor-pointer rounded-l-xl",
+                                    selectedCategory.value === i
+                                        ? "bg-white/20 text-white"
+                                        : "hover:bg-white/15 text-white/75 hover:text-white"
+                                ].join(" ")}
+                                onClick$={() => (selectedCategory.value = i)}
+                            >
+                                <h2 class="text-lg">{category.name}</h2>
+                                <p class="text-sm text-white/25">description</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div class="flex flex-col flex-3/4 text-lg">
+                    <h1 class="text-2xl mb-4">{categories.value[selectedCategory.value].name}</h1>
+                    <SelectedComponent.value />
                 </div>
             </div>
         </div>
-    ); else return (
-        <></>
     );
-})
+});