From 3cb85e6273d7a7cb84ba8f64c29b00dd8902b2d5 Mon Sep 17 00:00:00 2001
From: datalore <d4t4.l0r3@protonmail.ch>
Date: Thu, 2 Nov 2023 23:08:51 +0100
Subject: [PATCH] Implemented skeleton

---
 src/app/components/bingo.module.css |   8 +++
 src/app/components/bingo.tsx        |  16 +++++
 src/app/components/bingoitem.tsx    |   7 ++
 src/app/components/bingorow.tsx     |  13 ++++
 src/app/layout.tsx                  |   4 +-
 src/app/page.module.css             |   4 --
 src/app/page.tsx                    | 100 +++-------------------------
 7 files changed, 54 insertions(+), 98 deletions(-)
 create mode 100644 src/app/components/bingo.module.css
 create mode 100644 src/app/components/bingo.tsx
 create mode 100644 src/app/components/bingoitem.tsx
 create mode 100644 src/app/components/bingorow.tsx

diff --git a/src/app/components/bingo.module.css b/src/app/components/bingo.module.css
new file mode 100644
index 0000000..b3c967f
--- /dev/null
+++ b/src/app/components/bingo.module.css
@@ -0,0 +1,8 @@
+.table{
+	margin: 0 auto;
+	border: 1px solid;
+}
+
+.td{
+	padding: 12px 16px;
+}
diff --git a/src/app/components/bingo.tsx b/src/app/components/bingo.tsx
new file mode 100644
index 0000000..24b1f93
--- /dev/null
+++ b/src/app/components/bingo.tsx
@@ -0,0 +1,16 @@
+import styles from './bingo.module.css'
+import BingoRow from './bingorow.tsx'
+
+export default function Bingo(){
+	return(
+		<table className={styles.table}>
+		<tbody>
+		<BingoRow/>
+		<BingoRow/>
+		<BingoRow/>
+		<BingoRow/>
+		<BingoRow/>
+		</tbody>
+		</table>
+	);
+}
diff --git a/src/app/components/bingoitem.tsx b/src/app/components/bingoitem.tsx
new file mode 100644
index 0000000..0352cff
--- /dev/null
+++ b/src/app/components/bingoitem.tsx
@@ -0,0 +1,7 @@
+import styles from './bingo.module.css'
+
+export default function BingoItem(){
+	return(
+		<td className={styles.td}>Item</td>
+	);
+}
diff --git a/src/app/components/bingorow.tsx b/src/app/components/bingorow.tsx
new file mode 100644
index 0000000..7573179
--- /dev/null
+++ b/src/app/components/bingorow.tsx
@@ -0,0 +1,13 @@
+import BingoItem from './bingoitem.tsx'
+
+export default function BingoRow(){
+	return(
+		<tr>
+		<BingoItem/>
+		<BingoItem/>
+		<BingoItem/>
+		<BingoItem/>
+		<BingoItem/>
+		</tr>
+	);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 40e027f..a31049a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,8 +5,8 @@ import './globals.css'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Buzzword Bingo',
+  description: 'by data.lore',
 }
 
 export default function RootLayout({
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 6676d2c..39eb8ab 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,8 +1,4 @@
 .main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
   padding: 6rem;
   min-height: 100vh;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9ddf9b9..338a3f9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,95 +1,11 @@
-import Image from 'next/image'
 import styles from './page.module.css'
+import Bingo from './components/bingo.tsx'
 
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
+export default function Home(){
+	return(
+		<main className={styles.main}>
+		<h1 align="center">Buzzword Bingo</h1>
+		<Bingo/>
+		</main>
+	);
 }