feat: show guilds in dashboard

This commit is contained in:
Jozef Steinhübl 2024-08-03 00:03:27 +02:00
parent d018fbb1d6
commit b7dd3bf3ef
No known key found for this signature in database
GPG key ID: E6BC90C91973B08F
4 changed files with 52 additions and 3 deletions

View file

@ -0,0 +1,7 @@
---
const { class: className } = Astro.props;
---
<div class={`container mx-auto px-4 ${className ?? ""}`}>
<slot />
</div>

View file

@ -4,6 +4,8 @@ import type { User as AuthCoreUser } from "@auth/core/types";
export type User = AuthCoreUser & { export type User = AuthCoreUser & {
guilds: { guilds: {
id: string;
name: string; name: string;
icon: string;
}[]; }[];
}; };

View file

@ -1,6 +1,9 @@
--- ---
import type { User } from "~/env"; import type { User } from "~/env";
import { getSession } from "auth-astro/server"; import { getSession } from "auth-astro/server";
import Layout from "~/layouts/Layout.astro";
import Container from "~/components/Container.astro";
import { Image } from "astro:assets";
const session = await getSession(Astro.request); const session = await getSession(Astro.request);
if (!session || !session.user) { if (!session || !session.user) {
@ -8,8 +11,44 @@ if (!session || !session.user) {
} }
const user = session.user as User; const user = session.user as User;
console.log(user.guilds[0]);
--- ---
<p>Welcome {user.name}</p> <Layout>
{user.guilds.map((g) => g.id).join("\n\n")} <div class="flex items-center justify-center">
<Image
src={user.image!}
class="mr-5 rounded-full"
alt="icon"
width={64}
height={64}
/>
<h1 class="py-12 text-5xl font-extrabold text-white">
@{user.name}
</h1>
</div>
<Container class="pb-4">
<main
class="flex flex-wrap items-center justify-center gap-12 pb-4 text-white"
>
{
user.guilds.map((guild) => (
<section class="flex min-h-max w-80 justify-between rounded-md border-[1px] border-neutral-800 bg-dark-100 p-6 md:w-96">
<div class="flex flex-row items-center">
<Image
src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp`}
class="mr-5 rounded-full"
alt="icon"
width={64}
height={64}
/>
<h2 class="w-fit break-all text-3xl font-bold">{guild.name}</h2>
</div>
</section>
))
}
</main>
</Container>
</Layout>

View file

@ -5,6 +5,7 @@ module.exports = {
extend: { extend: {
colors: { colors: {
dark: "#111111", dark: "#111111",
"dark-100": "#1A1A1A",
blue: "#5865F2", blue: "#5865F2",
gold: "#FFA500", gold: "#FFA500",
}, },