Add pause/play button

src/Board.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Cell from './Cell';
+import Controls from './Controls';
 
 interface Props {
   width?: number;
@@ -11,9 +12,12 @@ const Board = (props: Props) => {
   const height = props.height ?? 5;
 
   const initialGrid: boolean[][] = Array(height).fill(Array(width).fill(false));
+
   const [grid, setGrid] = useState<boolean[][]>(initialGrid);
 
-  const toggle = (x: number, y: number) => {
+  const [running, setRunning] = useState<boolean>(false);
+
+  const toggleCell = (x: number, y: number) => {
     const newGrid = [...grid];
     const newRow = [...newGrid[y]];
     newRow[x] = !newGrid[y][x];
@@ -21,12 +25,17 @@ const Board = (props: Props) => {
     setGrid(newGrid);
   };
 
+  const toggleRunning = () => {
+    setRunning(!running);
+  };
+
   return (
     <div className="board">
+      <Controls running={running} toggle={toggleRunning} />
       {grid.map((row, y) => (
         <div className="row" key={y}>
           {row.map((cell, x) => (
-            <Cell x={x} y={y} alive={cell} toggle={toggle} key={x} />
+            <Cell x={x} y={y} alive={cell} toggle={toggleCell} key={x} />
           ))}
         </div>
       ))}

src/Controls.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface Props {
+  running: boolean;
+  toggle: () => void;
+}
+
+const Controls = (props: Props) => {
+  const { running, toggle } = props;
+
+  return (
+    <div className="controls">
+      <button onClick={toggle}>{running ? 'Pause' : 'Play'}</button>
+    </div>
+  );
+};
+
+export default Controls;

src/index.css

@@ -49,3 +49,23 @@ code {
 .cell.alive {
   background: black;
 }
+
+.controls {
+  display: flex;
+  margin-bottom: 1em;
+  width: 100%;
+}
+
+.controls button {
+  background: transparent;
+  border: 1px solid black;
+  cursor: pointer;
+  flex: 1;
+  font-size: 18px;
+  padding: 0.25em 0;
+}
+
+.controls button:hover {
+  background: black;
+  color: white;
+}