From 361c4e0b6233872b440604f3ffa07d048168c7b0 Mon Sep 17 00:00:00 2001 From: grngxd <36968271+grngxd@users.noreply.github.com> Date: Tue, 29 Jul 2025 22:19:56 +0100 Subject: [PATCH] new settings layout --- src/components/dashboard/Settings.tsx | 117 ++++++++++++++--- src/routes/dashboard/index.tsx | 179 +++++++++++--------------- 2 files changed, 180 insertions(+), 116 deletions(-) diff --git a/src/components/dashboard/Settings.tsx b/src/components/dashboard/Settings.tsx index 3b057b9..d7526f6 100644 --- a/src/components/dashboard/Settings.tsx +++ b/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 ( +
+

current plan: stereo free

+
+ ); +}); + +const Integrations = component$(() => { + return ( +
+

manage your api keys and integrations here

+
+ ); +}); + +const PrivacyAndSecurity = component$(() => { + return ( +
+

manage your privacy settings and security options

+
+ ); +}); + export default component$(() => { - const info = useNanostore$(userInfo); const open = useNanostore$(isSettingsOpen); - if (open.value) return ( -
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"> -
e.stopPropagation()} class="flex gap-8 bg-black/50 p-8 rounded-3xl shadow-lg w-4/7 h-4/7"> -
-

settings

-
+ const visible = useSignal(false); + const shouldRender = useSignal(open.value); -
-

content

+ 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 ( +
(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" + > +
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" + > +
+

settings

+
+ {categories.value.map((category, i) => ( +
(selectedCategory.value = i)} + > +

{category.name}

+

description

+
+ ))} +
+
+
+

{categories.value[selectedCategory.value].name}

+
- ); else return ( - <> ); -}) \ No newline at end of file +}); \ No newline at end of file diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index af8ef4b..0be2621 100644 --- a/src/routes/dashboard/index.tsx +++ b/src/routes/dashboard/index.tsx @@ -39,114 +39,91 @@ export default component$(() => { }); const formatSize = (bytes: number) => { - if (bytes < 1024) return `${bytes} B`; - if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; - if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; - return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`; + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; + if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; + return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`; } + const Files = component$<{ - files: Signal; - loaded: Signal; + files: Signal; + loaded: Signal; }>(({ files }) => { - - const File = component$(({ file }: { file: StereoFile }) => { - const Preview = component$(() => { - type FileType = - | "image" - | "video" - | "audio" - | "other"; - - const fileType: Signal = useSignal("other"); - const type = file.Mime.split("/")[1]; - - useTask$(async () => { - if ( - ["jpeg", "jpg", "png", "gif", "webp"] - .includes(type) - ) fileType.value = "image"; - - else if ( - ["mp4", "webm", "ogg", "avi", "mov"] - .includes(type) - ) fileType.value = "video"; - - else if ( - ["mp3", "wav", "flac", "aac"] - .includes(type) - ) fileType.value = "audio"; - - else fileType.value = "other"; - }); - - return ( -
- {fileType.value === "image" && ( - {file.Name} - )} - - {fileType.value === "video" && ( -
- ) - }) - - return ( -
- - -
-

{file.Name}

-

- {formatSize(file.Size)} - • - Uploaded on {new Date(file.CreatedAt).toLocaleDateString()} -

-
-
- ) - }) - - return ( -
-
- {files.value.map((file) => ( - - ))} + const File = component$(({ file }: { file: StereoFile }) => { + const Preview = component$(() => { + type FileType = "image" | "video" | "audio" | "other"; + const fileType: Signal = useSignal("other"); + const type = file.Mime.split("/")[1]; + useTask$(() => { + if (["jpeg", "jpg", "png", "gif", "webp"].includes(type)) fileType.value = "image"; + else if (["mp4", "webm", "ogg", "avi", "mov"].includes(type)) fileType.value = "video"; + else if (["mp3", "wav", "flac", "aac"].includes(type)) fileType.value = "audio"; + else fileType.value = "other"; + }); + return ( +
+ {fileType.value === "image" && ( + {file.Name} + )} + {fileType.value === "video" && ( +
+ ); + }); + return ( +
+ +
+

{file.Name}

+

+ {formatSize(file.Size)} + • + Uploaded on {new Date(file.CreatedAt).toLocaleDateString()} +

+
+
); + }); + return ( +
+
+ {files.value.map((file) => ( + + ))} +
+
+ ); }); export const head: DocumentHead = {