add headers fields

src/components/CustomHeaders.tsx

@@ -0,0 +1,27 @@
+import FormField from "#/components/FormField.tsx";
+
+const CustomHeaders = () => {
+	return (
+		<div className="my-4 w-full">
+			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
+				<summary>
+					Custom Headers (PDF)
+					<p className="text-sm font-normal">
+						Text in these fields will overwrite the PGN headers in the generated
+						PDF
+					</p>
+				</summary>
+				<div>
+					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
+						<FormField fieldName="title" type="text" />
+						<FormField fieldName="subtitle" type="text" />
+						<FormField fieldName="date" type="text" />
+						<FormField fieldName="author" type="text" />
+					</form>
+				</div>
+			</details>
+		</div>
+	);
+};
+
+export default CustomHeaders;

src/components/FormField.tsx

@@ -0,0 +1,22 @@
+export interface IFormField {
+	fieldName: string;
+	type: string;
+}
+
+const FormField = ({ fieldName, type }: IFormField) => {
+	return (
+		<div className="flex flex-col gap-2">
+			<label htmlFor={fieldName} className="text-sm capitalize">
+				{fieldName}
+			</label>
+			<input
+				className="headers__input"
+				type={type}
+				id={fieldName}
+				name={fieldName}
+			/>
+		</div>
+	);
+};
+
+export default FormField;

src/components/HeaderFields.tsx

@@ -0,0 +1,33 @@
+import FormField from "#/components/FormField.tsx";
+
+const HeaderFields = () => {
+	return (
+		<div className="my-4 w-full">
+			<details className="bg-(--neutral-content)/20 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" />
+						<FormField fieldName="site" type="text" />
+						<FormField fieldName="date" type="text" />
+						<FormField fieldName="round" type="text" />
+						<FormField fieldName="white" type="text" />
+						<FormField fieldName="black" type="text" />
+						<FormField fieldName="result" type="text" />
+						<FormField fieldName="eco" type="text" />
+						<FormField fieldName="whiteElo" type="text" />
+						<FormField fieldName="blackElo" type="text" />
+						<FormField fieldName="plyCount" type="text" />
+						<FormField fieldName="eventDate" type="text" />
+						<FormField fieldName="source" type="text" />
+					</form>
+				</div>
+			</details>
+		</div>
+	);
+};
+
+export default HeaderFields;

src/pages/Chessboard.tsx

@@ -1,3 +1,5 @@
+import CustomHeaders from "#/components/CustomHeaders.tsx";
+import HeaderFields from "#/components/HeaderFields.tsx";
 import LichessButton from "#/components/LichessButton.tsx";
 import PgnViewer from "#/components/PgnViewer.tsx";
 import Section from "#/components/Section.tsx";
@@ -78,32 +80,29 @@ const Chessboard = () => {
 					</div>
 				</div>
 
-				<div className="flex gap-4">
+				<div className="flex flex-col gap-4 items-center">
-					{/*<button*/}
+					<div className="flex justify-center gap-4">
-					{/*	className="btn btn-primary"*/}
+						<button
-					{/*	type="button"*/}
+							className="btn btn-secondary"
-					{/*	onClick={handleClearGame}*/}
+							type="button"
-					{/*>*/}
+							onClick={handleSavePgn}
-					{/*	Clear Game*/}
+							disabled={!gameState.pgn}
-					{/*</button>*/}
+						>
+							Save PGN
+						</button>
 
-					<button
+						<button
-						className="btn btn-secondary"
+							className="btn btn-secondary"
-						type="button"
+							type="button"
-						onClick={handleSavePgn}
+							onClick={handleSavePdf}
-						disabled={!gameState.pgn}
+							disabled={!gameState.pgn || generatingPdf}
-					>
+						>
-						Save PGN
+							Save PDF
-					</button>
+						</button>
+					</div>
 
-					<button
+					<HeaderFields />
-						className="btn btn-secondary"
+					<CustomHeaders />
-						type="button"
-						onClick={handleSavePdf}
-						disabled={!gameState.pgn || generatingPdf}
-					>
-						Save PDF
-					</button>
 				</div>
 			</div>
 		</main>

src/styles/_input.css

@@ -1,9 +1,23 @@
+/* Headers */
+.headers__input {
+	height: 3rem;
+	padding: 0 1rem;
+	line-height: 1.5rem;
+	border-radius: 0.5rem;
+	border: 1px solid var(--neutral-content);
+
+	&:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+}
+
 /* Checkbox */
 .checkbox-accent {
-  accent-color: var(--accent);
+	accent-color: var(--accent);
-  width: 18px;
+	width: 18px;
-  height: 18px;
+	height: 18px;
-  cursor: pointer;
+	cursor: pointer;
 }
 
 /* Toggle */