() => {
  const [duration, setDuration] = React.useState("");

  const changeHandler = (event) => {
    setDuration(event.target.value);
  };

  return (
    <Stack>
      <DurationInput
        value={duration}
        name="cost"
        id="cost"
        onChange={changeHandler}
      />
    </Stack>
  );
};

() => {
  const [duration, setDuration] = React.useState("90");

  const changeHandler = (event) => {
    setDuration(event.target.value);
  };

  return (
    <DocsBox
      css={{
        padding: 64,
        maxWidth: 400,
        boxShadow: "$md",
        backgroundColor: "$neutral1",
        borderRadius: "$default",
      }}
    >
      <Stack align="stretch" spacing="lg">
        <Typography variant="pageTitle">New Appointment</Typography>
        <Typography color="lowContrast">
          Please add the Duration of the appointment and the name of the patient
        </Typography>
        <FormField type="text" label="Patient name" />
        <FormField
          type="duration"
          label="Duration (minutes)"
          value={duration}
          onChange={changeHandler}
        />
        <Button appearance="primary">Save</Button>
      </Stack>
    </DocsBox>
  );
};