feat: guild info

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>

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>