chess-scribe-website/src/pages/Chessboard.tsx

import type { ChangeEvent, RefObject } from "react";
import LichessButton from "#/components/LichessButton.tsx";
import PgnViewer from "#/components/PgnViewer.tsx";
import Section from "#/components/Section.tsx";
import type { IGameState } from "#/reducers/gameReducer.ts";

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"
					ref={fileInputRef}
					className="file-input max-w-xs"
					onChange={handleLoadPgn}
				/>
			</Section>

			<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>
	);
};

export default Chessboard;