Fundementials of the new dashboard

6 files changed, 55 insertions, 14 deletions

diff --git a/web/src/app/components/Guilds.jsx b/web/src/app/components/Guilds.jsx
new file mode 100644
index 0000000..50baa98
--- /dev/null
+++ b/web/src/app/components/Guilds.jsx
@@ -0,0 +1,25 @@
+
+export default async function Guilds({session}) {
+
+    const response = await fetch("https://discord.com/api/users/@me/guilds", {
+        headers: {
+            Authorization: `Bearer ${session.accessToken}`,
+        },
+    });
+    const guilds = await response.json();
+
+    const MANAGE_GUILD = 0x00000020;
+
+    const filteredGuilds = guilds.filter((guild) => {
+        // Convert permissions string to a BigInt for bitwise operations
+        const permissions = BigInt(guild.permissions);
+        // Check if MANAGE_GUILD bit is set
+        return (permissions & BigInt(MANAGE_GUILD)) === BigInt(MANAGE_GUILD);
+    });
+
+    return filteredGuilds.map((guild) => (
+        <div key={guild.id}>
+            <h2>{guild.name}</h2>
+        </div>
+    ))
+}
diff --git a/web/src/app/components/sign-in.jsx b/web/src/app/components/sign-in.jsx
index bb891c7..3d7142f 100644
--- a/web/src/app/components/sign-in.jsx
+++ b/web/src/app/components/sign-in.jsx
@@ -8,7 +8,7 @@ export default function SignIn() {
                 await signIn("discord")
             }}
         >
-            <button type="submit">Login with Discord</button>
+            <button type="submit" className="bg-discord-blurple p-3 rounded-md hover:bg-discord-blurple">Login with Discord</button>
         </form>
     )
 }
diff --git a/web/src/app/dashboard/page.js b/web/src/app/dashboard/page.js
index 065bfb0..d6e3a41 100644
--- a/web/src/app/dashboard/page.js
+++ b/web/src/app/dashboard/page.js
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { auth } from "@/lib/auth";
 import SignOut from "@/app/components/sign-out";
+import Guilds from "@/app/components/Guilds";
 
 export default async function Home() {
     const session = await auth();
@@ -8,9 +9,19 @@ export default async function Home() {
 
     return (
         <div>
-            <h1>Dashboard</h1>
-            <p>Welcome {session.user?.name}</p>
-            <SignOut />
+            <nav className="bg-gray-900 text-white">
+                <div className="max-w-screen-xl flex items-center justify-between mx-auto p-4">
+                    <div className="flex items-center">
+                        <h1 className="text-xl font-medium">AleeBot</h1>
+                    </div>
+
+                    <div className="flex items-center space-x-4">
+                        <p className="text-sm md:text-base">Welcome {session.user?.username}!</p>
+                        <SignOut />
+                    </div>
+                </div>
+            </nav>
+            <Guilds session={session} />
         </div>
     )
 }
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index a2dc41e..4603348 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -8,8 +8,13 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-exo-sans);
+  --font-mono: var(--font-jetbrains-mono);
+}
+
+@theme discord {
+  --color-discord-blurple: #5865F2;
+  --color-discord-light-blurple: #E0E3FF;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,5 +27,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Exo 2", Helvetica, sans-serif;
 }
diff --git a/web/src/app/layout.js b/web/src/app/layout.js
index bec6c45..bd8d805 100644
--- a/web/src/app/layout.js
+++ b/web/src/app/layout.js
@@ -1,13 +1,13 @@
-import { Geist, Geist_Mono } from "next/font/google";
+import { Exo_2, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const exoSans = Exo_2({
+  variable: "--font-exo-sans",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains-mono",
   subsets: ["latin"],
 });
 
@@ -20,7 +20,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${exoSans.variable} ${jetbrainsMono.variable} antialiased`}
       >
         {children}
       </body>
diff --git a/web/src/app/page.js b/web/src/app/page.js
index 1890f99..65b3dda 100644
--- a/web/src/app/page.js
+++ b/web/src/app/page.js
@@ -7,7 +7,7 @@ export default async function Home() {
   if (session) redirect("/dashboard");
     return (
     <>
-      <main>
+      <main className="flex justify-center items-center h-screen">
       <SignIn />
       </main>
     </>