skal nkunne vise tre-på-rad brettet

Author: ViktorGSolberg

src/App.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
 import logo from './logo.svg'
 import './App.css'
+import * as React from 'react';
+import Board from "./frontend/board/Board";
 
-function App() {
+const App: React.FC = () => {
   const [count, setCount] = useState(0)
 
   return (
@@ -38,6 +40,7 @@ function App() {
           </a>
         </p>
       </header>
+      <Board size={3} />
     </div>
   )
 }

src/frontend/board/Board.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import styled from "styled-components";
+
+const BoardContainer = styled.div`
+margin: auto;
+width: 30%;
+display: flex;
+justify-content: center;
+flex-wrap: wrap;
+margin-top: 2rem;
+margin-bottom: 2rem;
+`;
+
+const Box = styled.div`
+background-color: #C86752;
+height: 10rem;
+width: 10rem;
+border: 2px solid black;
+`;
+
+interface Props {
+    size: number;
+}
+
+const Board: React.FC<Props> = ({size}) => {
+
+    const handleClick = () => {
+        console.log('click');
+    }
+
+    return (
+        <BoardContainer>
+            {Array.from({length: size*size}, (v, i) => i).map((num, index) => {
+                return <Box onClick={handleClick} key={index}/>
+            })}
+        </BoardContainer>
+        )
+}
+
+export default Board

src/index.css

@@ -1,5 +1,6 @@
 body {
   margin: 0;
+  background-color: #282c34;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;