DatePicker Input

import { useState } from "react";
import { Button } from "swash/Button";
import { SingleDatePickerInput } from "swash/controls/DatePickerInput";

() => {
  const [value, setValue] = useState("1989-05-21");
  return (
    <div className="flex gap-4 items-center">
      <SingleDatePickerInput value={value} onChange={setValue} />
      <Button type="button" onClick={() => setValue("1989-05-21")}>
        Reset time
      </Button>
    </div>
  );
};

import { ChangeEventHandler, useState } from "react";
import { Button } from "swash/Button";
import { SingleDatePickerInput } from "swash/controls/DatePickerInput";
import { Switch } from "swash/controls/Switch";

const Header = ({
  checked,
  onChange,
}: {
  checked: boolean;
  onChange: ChangeEventHandler<HTMLInputElement>;
}) => {
  return (
    <div className="bg-primary-bg-light p-4 flex gap-4">
      <Switch checked={checked} onChange={onChange} />
      <label className="font-accent font-semibold text-base">
        {checked ? "Dated" : "Not dated"}
      </label>
    </div>
  );
};

() => {
  const [value, setValue] = useState("1989-05-21");
  const [enabled, setEnabled] = useState(true);
  return (
    <div className="flex gap-4 items-center">
      <SingleDatePickerInput
        value={value}
        onChange={setValue}
        header={
          <Header
            checked={enabled}
            onChange={(event) => setEnabled(event.currentTarget.checked)}
          />
        }
        disabled={!enabled}
      />
      <Button type="button" onClick={() => setValue("1989-05-21")}>
        Reset time
      </Button>
    </div>
  );
};