top bar

src/components/dashboard/TitleBar.tsx

@@ -1,9 +1,41 @@
 import { component$ } from "@builder.io/qwik";
+import { useNanostore$ } from "~/hooks/nanostores";
+import { userInfo } from "~/lib/stores";
+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, |?",
+    ]
+
+    const greeting = greetings[Math.floor(Math.random() * greetings.length)];
+    const user = useNanostore$<StereoUser>(userInfo);
+
+    const splits = greeting.split("|");
+    
     return (
-        <div class="bg-blue-500">
-            <p>whats on the agenda today, @hexlocation?</p>
+        <div class="py-4 rounded-lg">
+            <p class="font-medium text-4xl text-stereo/45">
+                {splits[0]}
+                <span class="text-stereo">
+                    @{user.value?.username || "..."}
+                </span>
+                {splits[1]}
+            </p>
         </div>
     )
 })