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;