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,15 +80,8 @@ const Chessboard = () => {
 					</div>
 				</div>
 
-				<div className="flex gap-4">
-					{/*<button*/}
-					{/*	className="btn btn-primary"*/}
-					{/*	type="button"*/}
-					{/*	onClick={handleClearGame}*/}
-					{/*>*/}
-					{/*	Clear Game*/}
-					{/*</button>*/}
-
+				<div className="flex flex-col gap-4 items-center">
+					<div className="flex justify-center gap-4">
 						<button
 							className="btn btn-secondary"
 							type="button"
@@ -105,6 +100,10 @@ const Chessboard = () => {
 							Save PDF
 						</button>
 					</div>
+
+					<HeaderFields />
+					<CustomHeaders />
+				</div>
 			</div>
 		</main>
 	);

src/styles/_input.css

@@ -1,3 +1,17 @@
+/* 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);