set and clear game state using reducers - removed the need for global state management

src/pages/Chessboard.tsx

@@ -1,16 +1,65 @@
+import type { ChangeEvent, RefObject } from "react";
 import LichessButton from "#/components/LichessButton.tsx";
-import PgnViewerComponent from "#/components/LichessPgnViewerComponent.tsx";
+import PgnViewer from "#/components/PgnViewer.tsx";
 import Section from "#/components/Section.tsx";
+import type { IGameState } from "#/reducers/gameReducer.ts";
 
-const Chessboard = () => {
+interface IProps {
+	gameState: IGameState;
+	handleLoadPgn: (e: ChangeEvent<HTMLInputElement>) => void;
+	handleClearGame: () => void;
+	handleSavePgn: () => void;
+	handleSavePdf: () => void;
+	fileInputRef: RefObject<HTMLInputElement | null>;
+}
+
+const Chessboard = ({
+	gameState,
+	handleLoadPgn,
+	handleClearGame,
+	handleSavePgn,
+	handleSavePdf,
+	fileInputRef,
+}: IProps) => {
 	return (
 		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
 			<Section title="Convert PGN to PDF">
 				<LichessButton /> or{" "}
-				<input type="file" id="file-input" className="file-input max-w-xs" />
+				<input
+					type="file"
+					id="file-input"
+					ref={fileInputRef}
+					className="file-input max-w-xs"
+					onChange={handleLoadPgn}
+				/>
 			</Section>
 
-			<PgnViewerComponent pgn="" />
+			<div className="flex gap-4">
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleClearGame}
+				>
+					Clear Game
+				</button>
+
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleSavePgn}
+				>
+					Save PGN
+				</button>
+
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleSavePdf}
+				>
+					Save PDF
+				</button>
+			</div>
+			<PgnViewer gamePgn={gameState.pgn || ""} />
 		</main>
 	);
 };