112 lines
No EOL
4.3 KiB
TypeScript
112 lines
No EOL
4.3 KiB
TypeScript
import { $, component$, useOnDocument, useSignal } from "@builder.io/qwik";
|
|
import ky from "ky";
|
|
|
|
export default component$(() => {
|
|
type TestimonialProps = {
|
|
nickname: string;
|
|
pfp?: string;
|
|
id?: string;
|
|
quote: string;
|
|
};
|
|
|
|
type LanyardResponse = {
|
|
data: {
|
|
discord_status: "online" | "idle" | "dnd";
|
|
discord_user: {
|
|
avatar: string;
|
|
}
|
|
},
|
|
success: boolean;
|
|
}
|
|
|
|
const Testimonial = component$(({ nickname, id, quote, pfp }: TestimonialProps) => {
|
|
const lanyard = useSignal<LanyardResponse>();
|
|
|
|
useOnDocument("DOMContentLoaded", $(async () => {
|
|
if (!id) return;
|
|
|
|
try {
|
|
const response = await ky.get(`https://api.lanyard.rest/v1/users/${id}`).json<LanyardResponse>();
|
|
lanyard.value = response;
|
|
console.log("Lanyard data:", lanyard.value);
|
|
} catch (error) {
|
|
console.error("Error fetching lanyard data:", error);
|
|
}
|
|
}));
|
|
|
|
return (
|
|
<div
|
|
data-aos="fade-up"
|
|
data-aos-duration="1000"
|
|
class="flex gap-6 items-center bg-gradient-to-t from-stereo/15 to-stereo/5 rounded-2xl p-6 max-w-2xl shadow-2xl shadow-stereo/15"
|
|
>
|
|
<div class="relative h-30 aspect-square flex-shrink-0 rounded-full"
|
|
style={{
|
|
border: lanyard.value ? `3px solid ${
|
|
lanyard.value.data.discord_status === "online"
|
|
? "#43b581"
|
|
: lanyard.value.data.discord_status === "idle"
|
|
? "#faa61a"
|
|
: lanyard.value.data.discord_status === "dnd"
|
|
? "#f04747"
|
|
: "#7289da"
|
|
}` : "",
|
|
padding: lanyard.value ? `3px` : "0px",
|
|
}}>
|
|
<img
|
|
src={pfp ? pfp : (
|
|
lanyard.value
|
|
? `https://cdn.discordapp.com/avatars/${id}/${lanyard.value.data.discord_user.avatar}.png`
|
|
: `https://api.dicebear.com/9.x/shapes/svg?seed=${Math.random().toString(36).substring(2, 15)}.png`
|
|
)}
|
|
class="rounded-full h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<p class="text-stereo text-9xl h-min -mb-18">“</p>
|
|
<p class="text-lg text-white/90">
|
|
{quote}
|
|
</p>
|
|
<p class="text-white/60 font-light italic">— {nickname}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div
|
|
data-aos="fade-up"
|
|
data-aos-duration="1000"
|
|
class="flex flex-col gap-6 items-center justify-center w-4/5"
|
|
>
|
|
<div class="flex flex-col gap-1 items-center justify-center">
|
|
<p class="text-lg text-stereo font-bold uppercase">testimonials</p>
|
|
<p class="text-2xl text-white/80">
|
|
don't just take our word for it, hear it from our users.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col gap-6">
|
|
<Testimonial
|
|
nickname="grng"
|
|
id="829372486780715018"
|
|
quote="stereo is the best file host I've ever used, it's fast, reliable, and the interface is so clean and easy to use. I love it!"
|
|
/>
|
|
|
|
<Testimonial
|
|
nickname="hexlocation"
|
|
id="1325924978805440522"
|
|
quote="I've been using stereo for a while now, and I can't imagine going back to any other file host. It's just that good!"
|
|
/>
|
|
|
|
<Testimonial
|
|
nickname="an anonymous user"
|
|
quote="stereo has changed the way I share files, it's so easy to use and the performance is top-notch. Highly recommend!"
|
|
/>
|
|
</div>
|
|
<p class="text-xl text-white/50">
|
|
and many, many more...
|
|
</p>
|
|
</div>
|
|
);
|
|
}); |