From b7dd3bf3efd6d8ed6e50b2cd85b933bbc5dcdf28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jozef=20Steinh=C3=BCbl?= <xhyrom.hyro@gmail.com>
Date: Sat, 3 Aug 2024 00:03:27 +0200
Subject: [PATCH] feat: show guilds in dashboard

---
 apps/website/src/components/Container.astro  |  7 +++
 apps/website/src/env.d.ts                    |  2 +
 apps/website/src/pages/dashboard/index.astro | 45 ++++++++++++++++++--
 apps/website/tailwind.config.cjs             |  1 +
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 apps/website/src/components/Container.astro

diff --git a/apps/website/src/components/Container.astro b/apps/website/src/components/Container.astro
new file mode 100644
index 0000000..21ead53
--- /dev/null
+++ b/apps/website/src/components/Container.astro
@@ -0,0 +1,7 @@
+---
+const { class: className } = Astro.props;
+---
+
+<div class={`container mx-auto px-4 ${className ?? ""}`}>
+  <slot />
+</div>
diff --git a/apps/website/src/env.d.ts b/apps/website/src/env.d.ts
index 2fe3396..320a19a 100644
--- a/apps/website/src/env.d.ts
+++ b/apps/website/src/env.d.ts
@@ -4,6 +4,8 @@ import type { User as AuthCoreUser } from "@auth/core/types";
 
 export type User = AuthCoreUser & {
   guilds: {
+    id: string;
     name: string;
+    icon: string;
   }[];
 };
diff --git a/apps/website/src/pages/dashboard/index.astro b/apps/website/src/pages/dashboard/index.astro
index a80f808..252269a 100644
--- a/apps/website/src/pages/dashboard/index.astro
+++ b/apps/website/src/pages/dashboard/index.astro
@@ -1,6 +1,9 @@
 ---
 import type { User } from "~/env";
 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);
 if (!session || !session.user) {
@@ -8,8 +11,44 @@ if (!session || !session.user) {
 }
 
 const user = session.user as User;
-console.log(user.guilds[0]);
 ---
 
-<p>Welcome {user.name}</p>
-{user.guilds.map((g) => g.id).join("\n\n")}
+<Layout>
+  <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>
diff --git a/apps/website/tailwind.config.cjs b/apps/website/tailwind.config.cjs
index 7f98fbf..160ad84 100644
--- a/apps/website/tailwind.config.cjs
+++ b/apps/website/tailwind.config.cjs
@@ -5,6 +5,7 @@ module.exports = {
     extend: {
       colors: {
         dark: "#111111",
+        "dark-100": "#1A1A1A",
         blue: "#5865F2",
         gold: "#FFA500",
       },