Save bar

import { useState } from 'react';
import { SaveBar } from '@arbol-ai/ui';

const SAVED_NAME = 'Clínica Norte';

const SettingsForm = () => {
  const [name, setName] = useState(SAVED_NAME);
  const [savedName, setSavedName] = useState(SAVED_NAME);
  const [isPending, setIsPending] = useState(false);
  const [idle, setIdle] = useState<string>();
  const [error, setError] = useState<string | null>(null);
  return (
    <form
      className="max-w-md space-y-2"
      id="clinic-name"
      onSubmit={(event) => {
        event.preventDefault();
        if (name.trim() === '') {
          setError('We couldn’t save: the clinic needs a name.');
          return;
        }
        setIsPending(true);
        setTimeout(() => {
          setSavedName(name);
          setIsPending(false);
          setIdle('All changes saved.');
        }, 1200);
      }}
    >
      <label className="block text-sm font-medium" htmlFor="clinic-name-input">
        Clinic name
      </label>
      <input
        className="rounded-field bg-gray-a2 h-8 w-full border px-3 text-sm"
        id="clinic-name-input"
        onChange={(event) => {
          setName(event.target.value);
          setError(null);
        }}
        value={name}
      />
      <SaveBar
        error={error}
        form="clinic-name"
        idle={idle}
        isDirty={name !== savedName}
        isPending={isPending}
        onDiscard={() => {
          setName(savedName);
          setError(null);
        }}
      />
    </form>
  );
};

<SettingsForm />