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 fieldName="subtitle" type="text" headers={headers} />
-						<FormField fieldName="date" type="text" headers={headers} />
-						<FormField fieldName="author" type="text" headers={headers} />
+						<FormField
+							fieldName="title"
+							type="text"
+							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>