From ffa1d12f8c340f4759b6a6f2217a23019a8b6ba8 Mon Sep 17 00:00:00 2001
From: Riley Flynn <riley@rileyflynn.me>
Date: Tue, 26 Dec 2023 20:38:06 -0330
Subject: [PATCH] Fix tailwind class sorting, add basic guild list page

---
 prettier.config.js          |  3 ++-
 src/app/guilds/page.tsx     | 39 ++++++++++++++++++++++++++++++++++---
 src/components/ui/sheet.tsx |  2 +-
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/prettier.config.js b/prettier.config.js
index c21e0da..c2e2cdd 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -4,8 +4,9 @@ module.exports = {
     singleQuote: true,
     printWidth: 120,
     tabWidth: 4,
-    plugins: ['prettier-plugin-tailwindcss', '@trivago/prettier-plugin-sort-imports'],
+    plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
     importOrder: ['^@/components/(.*)$', '^@/(.*)$', '^[./]'],
     importOrderSeparation: true,
     importOrderSortSpecifiers: true,
+    tailwindFunctions: ['cva', 'cn'],
 };
diff --git a/src/app/guilds/page.tsx b/src/app/guilds/page.tsx
index 13235f0..b2d3cea 100644
--- a/src/app/guilds/page.tsx
+++ b/src/app/guilds/page.tsx
@@ -1,6 +1,10 @@
 import { and, eq, getTableColumns } from 'drizzle-orm';
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { Button } from '@/components/ui/button';
+
 import db from '@/db';
 import { guildMemberships, guilds } from '@/db/schema';
 import { ssrGetCurrentUser } from '@/lib/auth';
@@ -21,7 +25,7 @@ export default async function GuildsPage() {
     const currentUser = (await ssrGetCurrentUser())!;
 
     const currentUserGuilds = await db
-        .select({ ...getTableColumns(guilds) })
+        .select({ ...getTableColumns(guilds), admin: guildMemberships.admin })
         .from(guilds)
         .innerJoin(
             guildMemberships,
@@ -29,8 +33,37 @@ export default async function GuildsPage() {
         );
 
     return (
-        <div>
-            <pre>{JSON.stringify(currentUserGuilds, null, 2)}</pre>
+        <div className="space-y-4 p-4">
+            <div className="flex flex-row items-center justify-between">
+                <h2 className="text-2xl font-bold">Guilds</h2>
+                <Button className="flex flex-row items-center justify-between" variant="secondary" asChild>
+                    <a href="/guilds/begin-registration">
+                        <Plus className="mr-2 h-4 w-4" /> Add Guild
+                    </a>
+                </Button>
+            </div>
+            <div>
+                {currentUserGuilds.length !== 0 ? (
+                    <ul className="list-inside list-disc">
+                        {currentUserGuilds.map(({ id, name, admin }) => (
+                            <li key={id}>
+                                <Link href={`/guilds/${id}`} className="rounded-md p-2 transition-all hover:bg-accent">
+                                    {name}
+                                </Link>
+                                {admin && (
+                                    <span className="ml-2 text-sm text-muted-foreground" title="Guild Administrator">
+                                        (Admin)
+                                    </span>
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <div className="text-center italic text-muted-foreground">
+                        You are not a member of any registered guilds.
+                    </div>
+                )}
+            </div>
         </div>
     );
 }
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index ad2a80f..5034e39 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
     {
         variants: {
             side: {