real-worldgen/src/components/GenerateMapForm/index.tsx

import {VFC} from 'react';
import {DropdownSelect} from '../DropdownSelect';
import {Checkbox} from '../Checkbox';
import {NumericInput} from '../NumericInput';
import styles from '../../styles/components/GenerateMapForm/index.module.css';
import {ActionButton} from '../ActionButton';

type GenerateMapFormProps = {
  disabled?: boolean;
}

export const GenerateMapForm: VFC<GenerateMapFormProps> = ({
  disabled = false,
}) => {
  return (
    <div
      className={styles.base}
    >
      <div
        className={styles.fieldsetWrapper}
      >
        <fieldset
          className={styles.fieldset}
          disabled={disabled}
        >
          <legend>
            Base
          </legend>
          <div
            className={styles.formGroup}
          >
            <DropdownSelect
              name="map"
              block
              options={[
                {
                  label: 'World',
                  value: 'world',
                },
                {
                  label: 'Multiple Continents',
                  value: 'multiple-continents',
                  children: [
                    {
                      label: 'Afro-Eurasia',
                      value: 'multiple-continents.afro-eurasia',
                    },
                    {
                      label: 'Americas',
                      value: 'multiple-continents.americas',
                    },
                    {
                      label: 'Eurasia',
                      value: 'multiple-continents.eurasia',
                    }
                  ]
                },
                {
                  label: 'Single Continents',
                  value: 'single-continents',
                  children: [
                    {
                      label: 'Africa',
                      value: 'single-continents.africa',
                    },
                    {
                      label: 'Antarctica',
                      value: 'single-continents.antarctica',
                    },
                    {
                      label: 'Asia',
                      value: 'single-continents.asia',
                    },
                    {
                      label: 'Australia & Oceania',
                      value: 'single-continents.australia-oceania',
                    },
                    {
                      label: 'Europe',
                      value: 'single-continents.europe',
                    },
                    {
                      label: 'North America',
                      value: 'single-continents.north-america',
                    },
                    {
                      label: 'South America',
                      value: 'single-continents.south-america',
                    },
                  ],
                },
              ]}
            />
          </div>
          <div
            className={styles.formGroup}
          >
            <DropdownSelect
              name="projection"
              block
              options={[
                {
                  label: 'Equirectangular',
                  value: 'equirectangular',
                },
                {
                  label: 'Mercator',
                  value: 'mercator',
                },
              ]}
            />
          </div>
          <div
            className={styles.formGroup}
          >
            <DropdownSelect
              name="terrain"
              block
              options={[
                {
                  label: 'Normal (with shallow waters)',
                  value: 'normal-shallow-waters',
                },
                {
                  label: 'Normal (uniform waters)',
                  value: 'normal-uniform-waters',
                },
                {
                  label: 'Lava',
                  value: 'lava',
                },
              ]}
            />
          </div>
          <div
            className={styles.formGroup}
          >
            <Checkbox
              label="Force Island"
              defaultChecked
              name="forceIsland"
            />
          </div>
          <div
            className={styles.formGroup}
          >
            <Checkbox
              label="Add Natural Objects"
              defaultChecked
              name="addNaturalObjects"
            />
          </div>
        </fieldset>
      </div>
      <div
        className={styles.cities}
      >
        <fieldset
          className={styles.fieldset}
          disabled={disabled}
        >
          <legend>
            Cities
          </legend>

        </fieldset>
      </div>
      <div
        className={styles.fieldsetWrapper}
      >
        <fieldset
          className={styles.fieldset}
          disabled={disabled}
        >
          <legend>
            Map
          </legend>
          <div
            className={styles.horizontalFormGroup}
          >
            <div>
              <NumericInput
                min={1}
                block
                placeholder="Width"
                name="width"
                defaultValue={288}
              />
            </div>
            <div>
              <NumericInput
                min={1}
                block
                placeholder="Height"
                readOnly
                name="height"
              />
            </div>
          </div>
          <div
            className={styles.formGroup}
          >
            <div>
              <NumericInput
                block
                placeholder="Aspect Ratio"
                readOnly
              />
            </div>
          </div>
        </fieldset>
      </div>
      <div
        className={styles.fieldsetWrapper}
      >
        <ActionButton
          block
          disabled={disabled}
        >
          Generate Map
        </ActionButton>
      </div>
    </div>
  )
}