Toast notification

import { Toast } from '@base-ui/react/toast';

type Props = { onSave: () => void; onUndo: () => void };

// Base UI pauses the timer while the pointer or focus is on a toast and
// announces each one politely to screen readers.
export function SaveProfileButton(props: Props) {
  return (
    <Toast.Provider timeout={5000} limit={3}>
      <SaveButton {...props} />
      <Toast.Portal>
        <Toast.Viewport className='fixed right-4 bottom-4 flex w-80 flex-col-reverse gap-2'>
          <ToastList />
        </Toast.Viewport>
      </Toast.Portal>
    </Toast.Provider>
  );
}

function SaveButton({ onSave, onUndo }: Props) {
  const toastManager = Toast.useToastManager();
  function save() {
    onSave();
    const id = toastManager.add({
      title: 'Changes saved',
      actionProps: {
        children: 'Undo',
        onClick: () => {
          onUndo();
          toastManager.close(id);
        }
      }
    });
  }
  return (
    <button
      type='button'
      onClick={save}
      className='rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
    >
      Save changes
    </button>
  );
}

function ToastList() {
  const { toasts } = Toast.useToastManager();
  return toasts.map((toast) => (
    <Toast.Root
      key={toast.id}
      toast={toast}
      swipeDirection='right'
      className='flex translate-x-(--toast-swipe-movement-x) items-center justify-between gap-3 rounded-xl border bg-background px-4 py-3 shadow-lg transition-[opacity,translate] duration-250 ease-out data-ending-style:opacity-0 data-starting-style:translate-y-4 data-starting-style:opacity-0 data-swiping:duration-0 data-[swipe-direction=right]:data-ending-style:translate-x-[calc(100%+1rem)]'
    >
      <Toast.Title className='text-sm font-medium' />
      <Toast.Action className='text-sm font-medium text-blue-600 hover:underline' />
    </Toast.Root>
  ));
}