update header fields on typing

src/components/CustomHeaders.tsx

@@ -1,11 +1,13 @@
+import type { ChangeEvent } from "react";
 import FormField from "#/components/FormField.tsx";
 import type { IHeader } from "#/interfaces.ts";
 
 interface IProps {
 	headers: IHeader;
+	updateHeaders: (e: ChangeEvent<HTMLInputElement>, fieldName: string) => void;
 }
 
-const CustomHeaders = ({ headers }: IProps) => {
+const CustomHeaders = ({ headers, updateHeaders }: IProps) => {
 	return (
 		<div className="my-4 w-full">
 			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
@@ -18,10 +20,30 @@ const CustomHeaders = ({ headers }: IProps) => {
 				</summary>
 				<div>
 					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
-						<FormField fieldName="title" type="text" headers={headers} />
+						<FormField
-						<FormField fieldName="subtitle" type="text" headers={headers} />
+							fieldName="title"
-						<FormField fieldName="date" type="text" headers={headers} />
+							type="text"
-						<FormField fieldName="author" type="text" headers={headers} />
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="subtitle"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="date"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="author"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
 					</form>
 				</div>
 			</details>

src/components/FormField.tsx

@@ -1,15 +1,14 @@
-import { useChessGame } from "#/hooks/useChessGame.ts";
+import type { ChangeEvent } from "react";
 import type { IHeader } from "#/interfaces.ts";
 
 export interface IFormField {
 	fieldName: string;
 	type: string;
 	headers: IHeader;
+	updateHeaders: (e: ChangeEvent<HTMLInputElement>, fieldName: string) => void;
 }
 
-const FormField = ({ fieldName, type, headers }: IFormField) => {
+const FormField = ({ fieldName, type, headers, updateHeaders }: IFormField) => {
-	const { updateHeaders } = useChessGame();
-
 	return (
 		<div className="flex flex-col gap-2">
 			<label htmlFor={fieldName} className="text-sm capitalize">

src/components/HeaderFields.tsx

@@ -1,35 +1,100 @@
+import type { ChangeEvent } from "react";
 import FormField from "#/components/FormField.tsx";
 import type { IHeader } from "#/interfaces.ts";
 
 interface IProps {
 	headers: IHeader;
+	updateHeaders: (e: ChangeEvent<HTMLInputElement>, fieldName: string) => void;
 }
 
-const HeaderFields = ({ headers }: IProps) => {
+const HeaderFields = ({ headers, updateHeaders }: IProps) => {
-	console.log(headers);
-
 	return (
 		<div className="my-4 w-full">
-			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
+			<details className="bg-(--neutral-content)/15 p-4 rounded-lg">
 				<summary>
 					Headers
 					<p className="text-sm font-normal">Edit the game PGN headers</p>
 				</summary>
 				<div>
 					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
-						<FormField fieldName="event" type="text" headers={headers} />
+						<FormField
-						<FormField fieldName="site" type="text" headers={headers} />
+							fieldName="event"
-						<FormField fieldName="date" type="text" headers={headers} />
+							type="text"
-						<FormField fieldName="round" type="text" headers={headers} />
+							headers={headers}
-						<FormField fieldName="white" type="text" headers={headers} />
+							updateHeaders={updateHeaders}
-						<FormField fieldName="black" type="text" headers={headers} />
+						/>
-						<FormField fieldName="result" type="text" headers={headers} />
+						<FormField
-						<FormField fieldName="eco" type="text" headers={headers} />
+							fieldName="site"
-						<FormField fieldName="whiteElo" type="text" headers={headers} />
+							type="text"
-						<FormField fieldName="blackElo" type="text" headers={headers} />
+							headers={headers}
-						<FormField fieldName="plyCount" type="text" headers={headers} />
+							updateHeaders={updateHeaders}
-						<FormField fieldName="eventDate" type="text" headers={headers} />
+						/>
-						<FormField fieldName="source" type="text" headers={headers} />
+						<FormField
+							fieldName="date"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="round"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="white"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="black"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="result"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="eco"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="whiteElo"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="blackElo"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="plyCount"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="eventDate"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="source"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
 					</form>
 				</div>
 			</details>

src/hooks/useChessGame.ts

@@ -118,6 +118,7 @@ export const useChessGame = () => {
 						...getHeaders(pgnString),
 						title: "",
 						subtitle: "",
+						author: "",
 					};
 					gameDispatch({
 						type: "SET_GAME",

src/pages/Chessboard.tsx

@@ -18,6 +18,7 @@ const Chessboard = () => {
 		handleToggleClock,
 		handleToggleDiagram,
 		handlePlyChange,
+		updateHeaders,
 	} = useChessGame();
 
 	return (
@@ -101,8 +102,14 @@ const Chessboard = () => {
 						</button>
 					</div>
 
-					<HeaderFields headers={gameState.headers} />
+					<HeaderFields
-					<CustomHeaders headers={gameState.headers} />
+						headers={gameState.headers}
+						updateHeaders={updateHeaders}
+					/>
+					<CustomHeaders
+						headers={gameState.headers}
+						updateHeaders={updateHeaders}
+					/>
 				</div>
 			</div>
 		</main>

src/styles/_input.css

@@ -9,6 +9,7 @@
 	&:focus {
 		outline: none;
 		border-color: var(--accent);
+		background-color: var(--header-bg);
 	}
 }