From 770d68d5a54d53bd3ab64fc17acf7e4d81ac9ff1 Mon Sep 17 00:00:00 2001
From: Ole Morud <olekr99@hotmail.com>
Date: Sun, 21 Aug 2022 21:40:10 +0200
Subject: [PATCH] Add board component

---
 src/Board.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/Board.tsx

diff --git a/src/Board.tsx b/src/Board.tsx
new file mode 100644
index 0000000..a01edd0
--- /dev/null
+++ b/src/Board.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+import { Card, CardContent, Grid, Typography } from "@mui/material"
+
+function Board() {
+  const WIDTH = 10
+  const HEIGHT = 10
+  let key = 0
+
+  const board: string[][] = new Array(HEIGHT).fill(Array(WIDTH).fill("a"))
+
+  return (
+    <>
+      {
+        /* PRINT GRID */
+        board.map((row): JSX.Element => {
+          return (
+            <Grid key={key++} container columns={WIDTH} spacing={1} rowSpacing={1}>
+              {row.map((element): JSX.Element => {
+                return (
+                  <Card key={key++} sx={{ height: "5rem", width: "5rem", margins: "10px" }}>
+                    <CardContent>
+                      <Typography variant="body1">{element}</Typography>
+                    </CardContent>
+                  </Card>
+                )
+              })}
+            </Grid>
+          )
+        })
+      }
+    </>
+  )
+}
+
+export default Board