Demonstration page using groundwork form elements

DataEntryPage1.jsx

import { useState } from "react";
import {
  Fieldset,
  FieldGroup,
  Field,
  Label,
  Input,
  Textarea,
  OkCancel,
} from "@usace/groundwork";

const defaultValue = {
  title: "",
  description: "",
  fromDate: "",
  toDate: "",
};

function DataEntryPage1() {
  const [item, setItem] = useState(defaultValue);

  const handleChange = (key, val) => {
    setItem({ ...item, [key]: val });
  };

  const handleOk = () => {
    console.log(item);
  };

  const handleCancel = () => {
    setItem(defaultValue);
  };

  return (
    <div className="w-[50%]">
      <Fieldset className="mb-3">
        <FieldGroup>
          <Field>
            <Label htmlFor="input">Title</Label>
            <Input
              id="input"
              value={item.title}
              onChange={(e) => {
                handleChange("title", e.target.value);
              }}
            />
          </Field>
          <Field>
            <Label htmlFor="input">Description</Label>
            <Textarea
              id="textarea"
              value={item.description}
              onChange={(e) => {
                handleChange("description", e.target.value);
              }}
            />
          </Field>
          <Field>
            <Label htmlFor="from">From Date</Label>
            <Input
              type="date"
              value={item.fromDate}
              onChange={(e) => {
                handleChange("fromDate", e.target.value);
              }}
            />
          </Field>
          <Field>
            <Label htmlFor="to">To Date</Label>
            <Input
              type="date"
              value={item.toDate}
              onChange={(e) => {
                handleChange("toDate", e.target.value);
              }}
            />
          </Field>
        </FieldGroup>
      </Fieldset>
      <OkCancel onOk={handleOk} onCancel={handleCancel} />
    </div>
  );
}

export default DataEntryPage1;