60 lines
No EOL
2.2 KiB
TypeScript
60 lines
No EOL
2.2 KiB
TypeScript
import { component$, useTask$ } 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, <username>?",
|
|
"what's on your mind, <username>?",
|
|
"what's the plan, <username>?",
|
|
"ready to rock, <username>?",
|
|
"what's brewing, <username>?",
|
|
"what's the latest, <username>?",
|
|
"how's your day going, <username>?",
|
|
"need some inspiration, <username>?",
|
|
"let's make some noise, <username>!",
|
|
"welcome back, <username>!",
|
|
"good to see you, <username>!",
|
|
"what are we making today, <username>?",
|
|
"time to make some magic, <username>!",
|
|
"let's get creative, <username>!",
|
|
"what's the vibe today, <username>?",
|
|
"let's create something awesome, <username>!",
|
|
"what's the next big thing, <username>?",
|
|
"let's turn ideas into reality, <username>!",
|
|
"let's see your next masterpiece, <username>!",
|
|
"let's make some art, <username>!",
|
|
"what's the next hit, <username>?",
|
|
"let's make some music, <username>!",
|
|
"let's make some waves, <username>!",
|
|
"what brilliance awaits, <username>?",
|
|
"ready to brainstorm, <username>?",
|
|
"let's bring ideas to life, <username>!",
|
|
"don't get any ideas, <username>...",
|
|
"let's try this again, <username>!",
|
|
"let's get this party started, <username>!",
|
|
"let's make something unforgettable, <username>!",
|
|
]
|
|
|
|
const greeting = greetings[Math.floor(Math.random() * greetings.length)];
|
|
const user = useNanostore$<StereoUser>(userInfo);
|
|
|
|
const splits = greeting.split("<username>");
|
|
|
|
useTask$(({ track }) => {
|
|
track(() => user.value);
|
|
})
|
|
|
|
return (
|
|
<div class="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>
|
|
)
|
|
}) |