Update cards

finol-digital · Aug 27, 2024 · f628eee · f628eee
1 parent 4963e16
commit f628eee
Show file tree

Hide file tree

Showing 9 changed files with 5,230 additions and 225 deletions.
diff --git a/app/global.css b/app/global.css
@@ -1,15 +1,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap");
 
-* {
-  box-sizing: border-box;
-}
-
-*:before,
-*:after {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
+  background: #eef0f1;
   --color-bg: #eef0f1;
   --color-text: #08090a;
   --color-blue: #3b49df;
@@ -18,16 +14,26 @@
   --color-gray: #b5bdc4;
 }
 
+* {
+  box-sizing: border-box;
+}
+
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 html,
 body {
+  background-color: var(--color-bg);
+  color: var(--color-text);
   height: 100%;
   position: relative;
   font-family: "Noto Sans", sans-serif;
-  background-color: var(--color-bg);
-  color: var(--color-text);
 }
 
 .main-container {
+  background-color: var(--color-bg);
   min-height: 100vh;
   /* will cover the 100% of viewport */
   overflow: hidden;
@@ -38,23 +44,21 @@ body {
 }
 
 .main-content {
+  background-color: var(--color-bg);
   max-width: 900px;
   position: relative;
   margin: 0 auto;
 }
 
 footer {
+  background-color: var(--color-bg);
   text-align: center;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 200px;
 }
 
-table {
-  width: 100%;
-}
-
 /* Buttons */
 .button {
   display: inline-block;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import UserContextProvider from "@/components/userContextProvider";
+import { Providers } from "./providers";
 import { Metadata, Viewport } from "next";
 import "./global.css";
 
@@ -45,7 +46,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <UserContextProvider>{children}</UserContextProvider>
+        <Providers>
+          <UserContextProvider>{children}</UserContextProvider>
+        </Providers>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -21,7 +21,7 @@ export default async function Page() {
           You can{" "}
           <Link href="https://github.com/finol-digital/Card-Game-Simulator/wiki/Crash-Course-into-Game-Development-with-CGS">
             create
-          </Link>
+          </Link>{" "}
           and <Link href="/upload">upload</Link> your own custom card games, or
           browse games uploaded by others:
         </p>

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { NextUIProvider } from "@nextui-org/react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <NextUIProvider>{children}</NextUIProvider>;
+}
diff --git a/components/gamesDeck.tsx b/components/gamesDeck.tsx
@@ -1,33 +1,37 @@
 import Game from "@/lib/game";
+import { Card, CardBody, CardFooter, CardHeader } from "@nextui-org/card";
 import Link from "next/link";
+import Banner from "./banner";
 
 export default function GamesDeck({ games }: { games: Game[] }) {
   return (
-    <>
-      <table>
-        <thead>
-          <tr>
-            <th align="left">Game</th>
-            <th align="left">Copyright</th>
-            <th align="left">Uploaded By</th>
-          </tr>
-        </thead>
-        <tbody>
-          {games.map((val, key) => {
-            return (
-              <tr key={key}>
-                <td>
-                  <Link href={`/${val.username}/${val.slug}`}>{val.name}</Link>
-                </td>
-                <td>{val.copyright}</td>
-                <td>
-                  <Link href={`/${val.username}`}>{val.username}</Link>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </>
+    <div className="max-w-[800px] gap-2 grid grid-cols-1">
+      {games.map((game, index) => {
+        return (
+          <Card key={index} className="border-none">
+            <CardBody className="overflow-visible p-0">
+              <center>
+                <Banner
+                  home={`/${game.username}/${game.slug}`}
+                  img={game.bannerImageUrl}
+                  txt={game.name}
+                />
+              </center>
+            </CardBody>
+            <CardFooter className="text-small justify-between">
+              {game.copyright && (
+                <p className="text-default-500">
+                  Copyright of {game.copyright}
+                </p>
+              )}
+              <p className="text-default-500">
+                Uploaded by{" "}
+                <Link href={`/${game.username}`}>{game.username}</Link>
+              </p>
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
   );
 }