Move to Typescript.

src/App.tsx

@@ -0,0 +1,32 @@
+import {useReducer} from 'react';
+import Maze from "./Maze.tsx";
+import InputForm from "./InputForm.tsx";
+import reduce from "./state/reducer.ts";
+import MessageBanner from "./MessageBanner.tsx";
+import {INITIAL_STATE} from "./state/state.ts";
+import {actionToggledShowSolution} from "./state/action.ts";
+
+export default function App() {
+    const [state, dispatch] = useReducer(reduce, INITIAL_STATE);
+    const hasValidMaze = !!state.maze;
+    return (
+        <>
+            <MessageBanner state={state}
+                           dispatch={dispatch}/>
+            <InputForm state={state}
+                       dispatch={dispatch}/>
+            {hasValidMaze &&
+                <>
+                    <h1>The Maze ({state.maze.width}x{state.maze.height}, 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}/>
+                </>
+            }
+        </>
+    );
+}