update react

src/app/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import styles from "./page.module.css";
+import {useReducer} from "react";
+import reduce from "./state/reducer.ts";
+import {INITIAL_STATE} from "./state/state.ts";
+import MessageBanner from "./message-banner.tsx";
+import InputForm from "./input-form.tsx";
+import {actionToggledShowSolution} from "./state/action.ts";
+import Maze from "./maze.tsx";
+
+export default function Home() {
+    const [state, dispatch] = useReducer(reduce, INITIAL_STATE);
+    const hasValidMaze = !!state.maze;
+    return (
+        <div className={styles.page}>
+            <h1 className={styles.mainheading}>A-Maze-R! Create your own maze!</h1>
+            <h2 className={styles.mainheading}>A fun little maze generator written by fritteli</h2>
+            <MessageBanner state={state}
+                           dispatch={dispatch}/>
+            <InputForm state={state}
+                       dispatch={dispatch}/>
+            {hasValidMaze &&
+                <>
+                    <h1>The Maze ({state.maze.width}x{state.maze.height}, Algorithm: {state.maze.algorithm},
+                        ID: {state.maze.id})</h1>
+                    <input type={"checkbox"}
+                           onChange={(e) => {
+                               dispatch(actionToggledShowSolution(e.target.checked));
+                           }}
+                           id={"showSolution"}/><label htmlFor="showSolution">Show Solution</label>
+                    <Maze state={state}
+                          dispatch={dispatch}/>
+                </>
+            }
+        </div>
+    );
+}