owenrees/chess-scribe-website
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/chess-scribe-website.git synced 2026-07-23 01:46:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

populate header fields

Browse Source
This commit is contained in:
Owen Rees
2026-06-02 22:33:27 +02:00
parent 00267b05ba
commit 5ed83a20d8
6 changed files with 60 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CustomHeaders.tsx
+10 -5
View File
@@ -1,6 +1,11 @@
import FormField from "#/components/FormField.tsx";
import type { IHeader } from "#/interfaces.ts";
const CustomHeaders = () => {
interface IProps {
headers: IHeader;
}
const CustomHeaders = ({ headers }: IProps) => {
return (
<div className="my-4 w-full">
<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
@@ -13,10 +18,10 @@ const CustomHeaders = () => {
</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" />
<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} />
</form>
</div>
</details>
src/components/FormField.tsx
+9 -1
View File
@@ -1,9 +1,15 @@
import { useChessGame } from "#/hooks/useChessGame.ts";
import type { IHeader } from "#/interfaces.ts";
export interface IFormField {
fieldName: string;
type: string;
headers: IHeader;
}
const FormField = ({ fieldName, type }: IFormField) => {
const FormField = ({ fieldName, type, headers }: IFormField) => {
const { updateHeaders } = useChessGame();
return (
<div className="flex flex-col gap-2">
<label htmlFor={fieldName} className="text-sm capitalize">
@@ -14,6 +20,8 @@ const FormField = ({ fieldName, type }: IFormField) => {
type={type}
id={fieldName}
name={fieldName}
value={headers[fieldName]}
onChange={(e) => updateHeaders(e, fieldName)}
/>
</div>
);
src/components/HeaderFields.tsx
+21 -14
View File
@@ -1,6 +1,13 @@
import FormField from "#/components/FormField.tsx";
import type { IHeader } from "#/interfaces.ts";
interface IProps {
headers: IHeader;
}
const HeaderFields = ({ headers }: IProps) => {
console.log(headers);
const HeaderFields = () => {
return (
<div className="my-4 w-full">
<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
@@ -10,19 +17,19 @@ const HeaderFields = () => {
</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" />
<FormField fieldName="event" type="text" headers={headers} />
<FormField fieldName="site" type="text" headers={headers} />
<FormField fieldName="date" type="text" headers={headers} />
<FormField fieldName="round" type="text" headers={headers} />
<FormField fieldName="white" type="text" headers={headers} />
<FormField fieldName="black" type="text" headers={headers} />
<FormField fieldName="result" type="text" headers={headers} />
<FormField fieldName="eco" type="text" headers={headers} />
<FormField fieldName="whiteElo" type="text" headers={headers} />
<FormField fieldName="blackElo" type="text" headers={headers} />
<FormField fieldName="plyCount" type="text" headers={headers} />
<FormField fieldName="eventDate" type="text" headers={headers} />
<FormField fieldName="source" type="text" headers={headers} />
</form>
</div>
</details>