Form

"use client";

import {
  Button,
  ButtonGroup,
  DateInput,
  FormDivider,
  FormGroup,
  FormRepeat,
  FormSpacing,
  Input,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

type EmailAddress = {
  email: string;
};

type Contact = {
  name: string;
  email: string;
};

export const FormExample: React.FC = () => {
  const [value, setValue] = React.useState("");
  const [date, setDate] = useState<Date>(new Date());
  const [emailAddresses, setEmailAddresses] = useState<EmailAddress[]>([]);
  const [contacts, setContacts] = useState<Contact[]>([]);
  return (
    <form>
      <FormSpacing>
        <FormDivider>Your Personal Information</FormDivider>
        <Input
          label={"Name"}
          value={value}
          placeholder={"Your Name"}
          onChange={e => {
            setValue(e);
          }}></Input>
        <DateInput
          label={"Date"}
          type={"datetime"}
          timezone={"America/Los_Angeles"}
          value={date}
          onChange={value => {
            setDate(value as Date);
          }}></DateInput>
        <FormDivider>Your email addresses</FormDivider>
        <FormRepeat
          label={"Email Addresses"}
          addLabel={"Add Email"}
          hint={"Add one or more email addresses"}
          value={emailAddresses}
          onChange={setEmailAddresses}
          newItem={() => ({email: ""})}>
          {({value, onChange}) => (
            <Input
              value={value.email}
              onChange={change => onChange({...value, email: change})}
              placeholder={"email@example.com"}
            />
          )}
        </FormRepeat>
        <FormDivider>Your emergency contacts</FormDivider>
        <FormRepeat
          label={"Contacts"}
          addLabel={"Add Contact"}
          hint={"Add contact information"}
          value={contacts}
          onChange={setContacts}
          newItem={() => ({name: "", email: ""})}>
          {({value, onChange}) => (
            <FormGroup groupLabel={`Contact - ${value.name}`}>
              <FormSpacing>
                <Input
                  label={"Name"}
                  value={value.name}
                  onChange={change => onChange({...value, name: change})}
                  placeholder={"John Doe"}
                />
                <Input
                  label={"Email"}
                  value={value.email}
                  onChange={change => onChange({...value, email: change})}
                  placeholder={"john@example.com"}
                />
              </FormSpacing>
            </FormGroup>
          )}
        </FormRepeat>
        <ButtonGroup>
          <Button>Send</Button>
          <Button>Delete</Button>
        </ButtonGroup>
      </FormSpacing>
    </form>
  );
};