embeds

src/components/dashboard/Settings.tsx

@@ -3,17 +3,62 @@
 // import { isSettingsOpen, userInfo } from "~/lib/stores";
 // import { StereoUser } from "~/lib/types";
 
-import { $, component$, useComputed$, useSignal, useTask$ } from "@builder.io/qwik";
+import { $, component$, useComputed$, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
 import ky from "ky";
 import { useNanostore$ } from "~/hooks/nanostores";
-import { isSettingsOpen } from "~/lib/stores";
+import { isSettingsOpen, userInfo } from "~/lib/stores";
 
 const StorageAndPlan = component$(() => {
+    const user = useNanostore$(userInfo);
+
+    useVisibleTask$(({track}) => {
+        if (user.value) {
+            console.log(user.value.global_name);
+        }
+    });
+
     return (
-        <div>
+        <div class="flex flex-col gap-2">
             <p>current plan: stereo pro+</p>
             <p>storage used: 3.8 / 15 GB</p>
             <p>upgrade your plan for more features</p>
+
+            <p class="text-lg">embed editor</p>
+            {user.value && (
+                <div class="flex gap-2">
+                    <div class="flex gap-3">
+                        <img
+                            class="rounded-full w-12 h-12"
+                            src={
+                                user.value.id && user.value.avatar
+                                    ? `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}.webp?size=512`
+                                    : ""
+                            }
+                        />
+                        
+                        <div class="flex flex-col gap-1">
+                            <div class="flex gap-1 items-center">
+                                <p>{user.value.global_name}</p>
+                                <p class="text-sm opacity-50">{new Date().toLocaleTimeString().split(":").slice(0, 2).join(":")}</p>
+                            </div>
+                            <div class="overflow-clip flex bg-black/25 rounded-lg">
+                                <div class="w-1.5 bg-stereo" />
+                                <div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg">
+                                    <p class="text-sm opacity-50">This is a test</p>
+                                    <img
+                                        class="rounded-sm aspect-[3/2]"
+                                        src="https://placehold.co/300x200"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                
+                    <div>
+                        {/* form for embed */}
+                    </div>
+                </div>
+            )}
         </div>
     );
 });
@@ -142,6 +187,7 @@ export default component$(() => {
                         ))}
                     </div>
                 </div>
+                
                 <div class="flex flex-col flex-3/4 text-lg overflow-clip">
                     <h1 class="text-2xl mb-2">{categories.value[selectedCategory.value].name}</h1>
                     <SelectedComponent.value />

src/lib/stores.ts

@@ -8,6 +8,8 @@ export const userInfo = atom<StereoUser>({
     username: "user",
     blacklisted: false,
     email: "user@example.com",
+    avatar: "",
+    global_name: "User",
     created_at: Date.now().toString(),
 });
 export const isSettingsOpen = atom<boolean>(false);

src/lib/types.ts

@@ -13,7 +13,9 @@ export type StereoFile = {
 export type StereoUser = {
     id: string;
     username: string;
+    global_name: string;
     blacklisted: boolean;
     email: string;
+    avatar: string;
     created_at: string;
 }