From e285c47e011e40c1eaf3a80f2de8c4b14e831d6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jozef=20Steinh=C3=BCbl?= <xhyrom.hyro@gmail.com>
Date: Tue, 6 Aug 2024 21:54:44 +0200
Subject: [PATCH] feat: guild info

---
 .../src/components/dashboard/GuildInfo.astro  | 25 +++++++++++++++++++
 .../src/pages/dashboard/guilds/[id].astro     | 15 ++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 apps/website/src/components/dashboard/GuildInfo.astro

diff --git a/apps/website/src/components/dashboard/GuildInfo.astro b/apps/website/src/components/dashboard/GuildInfo.astro
new file mode 100644
index 0000000..de06da9
--- /dev/null
+++ b/apps/website/src/components/dashboard/GuildInfo.astro
@@ -0,0 +1,25 @@
+---
+import { Image } from "astro:assets";
+
+interface Props {
+  id: string;
+  name: string;
+  icon: string;
+}
+
+const { id, name, icon } = Astro.props;
+---
+
+<div class="flex items-center justify-center">
+  <Image
+    src={`https://cdn.discordapp.com/icons/${id}/${icon}.webp`}
+    class="mr-5 rounded-full"
+    alt="icon"
+    width={64}
+    height={64}
+  />
+
+  <h1 class="break-all py-12 text-5xl font-extrabold text-white">
+    {name}
+  </h1>
+</div>
diff --git a/apps/website/src/pages/dashboard/guilds/[id].astro b/apps/website/src/pages/dashboard/guilds/[id].astro
index cfadc13..fa2a750 100644
--- a/apps/website/src/pages/dashboard/guilds/[id].astro
+++ b/apps/website/src/pages/dashboard/guilds/[id].astro
@@ -1,4 +1,7 @@
 ---
+import GuildInfo from "~/components/dashboard/GuildInfo.astro";
+import UserInfo from "~/components/dashboard/UserInfo.astro";
+import Layout from "~/layouts/Layout.astro";
 import { getGuild } from "~/lib/guilds";
 import { isUserEligible } from "~/lib/user";
 
@@ -20,4 +23,14 @@ if (!eligible) {
 }
 ---
 
-You can manage guild {guild.name} with id {guild.id}
+<Layout>
+  <div class="flex flex-col items-center justify-center md:flex-row">
+    <UserInfo />
+
+    <p class="px-6 text-5xl text-white">on</p>
+
+    <GuildInfo id={guild.id} name={guild.name} icon={guild.icon} />
+  </div>
+
+  You can manage guild {guild.name} with id {guild.id}
+</Layout>