diff --git a/src/components/dashboard/OSBar.tsx b/src/components/dashboard/Actionbar.tsx similarity index 100% rename from src/components/dashboard/OSBar.tsx rename to src/components/dashboard/Actionbar.tsx diff --git a/src/components/dashboard/Settings.tsx b/src/components/dashboard/Settings.tsx index d7526f6..104d316 100644 --- a/src/components/dashboard/Settings.tsx +++ b/src/components/dashboard/Settings.tsx @@ -10,7 +10,9 @@ import { isSettingsOpen } from "~/lib/stores"; const StorageAndPlan = component$(() => { return (
-

current plan: stereo free

+

current plan: stereo pro+

+

storage used: 3.8 / 15 GB

+

upgrade your plan for more features

); }); @@ -31,6 +33,14 @@ const PrivacyAndSecurity = component$(() => { ); }); +const DangerZone = component$(() => { + return ( +
+

delete your account and data here

+
+ ); +}); + export default component$(() => { const open = useNanostore$(isSettingsOpen); @@ -49,9 +59,26 @@ export default component$(() => { }); const categories = useSignal([ - { name: "storage & plan", component: StorageAndPlan }, - { name: "api & integrations" , component: Integrations }, - { name: "privacy & security" , component: PrivacyAndSecurity } + { + 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); @@ -81,28 +108,28 @@ export default component$(() => { 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" > -
+

settings

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

{category.name}

-

description

+

{category.description}

))}
-
-

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

+
+

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

diff --git a/src/components/dashboard/TitleBar.tsx b/src/components/dashboard/TitleBar.tsx index c26af60..5782756 100644 --- a/src/components/dashboard/TitleBar.tsx +++ b/src/components/dashboard/TitleBar.tsx @@ -5,27 +5,42 @@ import { StereoUser } from "~/lib/types"; export default component$(() => { const greetings = [ - "what's on the agenda today, |?", - "what's on your mind, |?", - "what's the plan, |?", - "ready to rock, |?", - "what's brewing, |?", - "what's the latest, |?", - "how's your day going, |?", - "need some inspiration, |?", - "let's make some noise, |!", - "welcome back, |!", - "good to see you, |!", - "what are we making today, |?", - "time to make some magic, |!", - "let's get creative, |?", - "what's the vibe today, |?", + "what's on the agenda today, ?", + "what's on your mind, ?", + "what's the plan, ?", + "ready to rock, ?", + "what's brewing, ?", + "what's the latest, ?", + "how's your day going, ?", + "need some inspiration, ?", + "let's make some noise, !", + "welcome back, !", + "good to see you, !", + "what are we making today, ?", + "time to make some magic, !", + "let's get creative, !", + "what's the vibe today, ?", + "let's create something awesome, !", + "what's the next big thing, ?", + "let's turn ideas into reality, !", + "let's see your next masterpiece, !", + "let's make some art, !", + "what's the next hit, ?", + "let's make some music, !", + "let's make some waves, !", + "what brilliance awaits, ?", + "ready to brainstorm, ?", + "let's bring ideas to life, !", + "don't get any ideas, ...", + "let's try this again, !", + "let's get this party started, !", + "let's make something unforgettable, !", ] const greeting = greetings[Math.floor(Math.random() * greetings.length)]; const user = useNanostore$(userInfo); - const splits = greeting.split("|"); + const splits = greeting.split(""); useTask$(({ track }) => { track(() => user.value); diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index 0be2621..16911f1 100644 --- a/src/routes/dashboard/index.tsx +++ b/src/routes/dashboard/index.tsx @@ -1,8 +1,8 @@ import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik"; import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city"; -import OSBar from "~/components/dashboard/OSBar"; +import Actionbar from "~/components/dashboard/Actionbar"; import Settings from "~/components/dashboard/Settings"; -import TitleBar from "~/components/dashboard/TitleBar"; +import Titlebar from "~/components/dashboard/Titlebar"; // import Dropzone from "~/components/Dropzone"; import { useNanostore$ } from "~/hooks/nanostores"; import { api } from "~/lib/api"; @@ -30,9 +30,9 @@ export default component$(() => { <>
- + - +
); @@ -68,7 +68,7 @@ const Files = component$<{ width={400} src={`/api/${file.ID}`} alt={file.Name} - class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300" + class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300" /> )} {fileType.value === "video" && ( @@ -76,18 +76,18 @@ const Files = component$<{ width={400} src={`/api/${file.ID}`} controls - class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300" + class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300" /> )} {fileType.value === "audio" && (