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

update header fields on typing

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