Dashboard Sample

.github/workflows/formatting.yml

@@ -8,19 +8,19 @@ jobs:
     runs-on: ubuntu-latest
 
     permissions:
-      contents: write  # Required to push to the repo
+      contents: write # Required to push to the repo
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.head_ref }}  # Checkout PR branch
+          ref: ${{ github.head_ref }} # Checkout PR branch
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci

app/dashboard/page.tsx

@@ -1,5 +1,100 @@
 import React from "react";
 
-export default function page() {
-  return <div>dashboard page</div>;
+type Event = {
+  id: string;
+  title: string;
+  participants: string[];
+};
+
+export default function Page() {
+  // Mock data for testing
+  const joinedEvents: Event[] = [
+    {
+      id: "1",
+      title: "Dinner With Friends",
+      participants: ["A", "B", "C", "D", "E", "F"],
+    },
+    { id: "2", title: "Board Game Night", participants: ["D", "E"] },
+    {
+      id: "3",
+      title: "Dungeons & Dragons ",
+      participants: ["F", "G", "H", "I"],
+    },
+    { id: "4", title: "Project Meeting", participants: ["I", "J", "K"] },
+    {
+      id: "5",
+      title: "Competitive Slug Racing",
+      participants: ["L", "M", "N", "O", "P"],
+    },
+  ];
+
+  const createdEvents: Event[] = [
+    { id: "6", title: "Study Session", participants: ["I", "J", "K"] },
+    {
+      id: "7",
+      title: "Eboard Meeting",
+      participants: ["L", "M", "N", "O", "P"],
+    },
+  ];
+
+  const renderParticipants = (participants: string[]) => {
+    const visible = participants.slice(0, 4);
+    const extraCount = participants.length - visible.length;
+
+    return (
+      <>
+        {visible.map((p, i) => (
+          <div
+            key={i}
+            className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-400 text-xs"
+          >
+            {p}
+          </div>
+        ))}
+        {extraCount > 0 && (
+          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 text-xs text-white">
+            +{extraCount}
+          </div>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className="min-h-screen p-6">
+      {/* Events You Joined */}
+      <section>
+        <h2 className="mb-4 text-2xl font-bold">Events You Joined</h2>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {joinedEvents.map((event) => (
+            <div key={event.id} className="flex flex-col items-center">
+              <div className="flex h-40 w-full flex-col justify-end rounded-lg bg-gray-200 p-4 text-black shadow transition hover:shadow-lg">
+                <div className="flex gap-1">
+                  {renderParticipants(event.participants)}
+                </div>
+              </div>
+              <h3 className="mt-2 text-center font-semibold">{event.title}</h3>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Events You Created */}
+      <section className="mt-8">
+        <h2 className="mb-4 text-2xl font-bold">Events You Created</h2>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {createdEvents.map((event) => (
+            <div key={event.id} className="flex flex-col items-center">
+              <div className="flex h-40 w-full flex-col justify-end rounded-lg bg-gray-200 p-4 text-black shadow transition hover:shadow-lg">
+                <div className="flex gap-1">
+                  {renderParticipants(event.participants)}
+                </div>
+              </div>
+              <h3 className="mt-2 text-center font-semibold">{event.title}</h3>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
 }