Translate

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

export function SaveToast() {
  return (
    <Toast.Provider>
      <SaveButton />
      <Toast.Portal>
        <Toast.Viewport className='fixed right-4 bottom-4 flex w-80 flex-col gap-2'>
          <ToastList />
        </Toast.Viewport>
      </Toast.Portal>
    </Toast.Provider>
  );
}

function SaveButton() {
  const toastManager = Toast.useToastManager();
  return (
    <button
      type='button'
      onClick={() =>
        toastManager.add({
          title: 'Changes saved',
          description: 'Your profile is up to date.'
        })
      }
      className='rounded-full 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}
      // Enter from 16px below and leave the same way. Reduced motion keeps only the fade.
      className='rounded-xl border bg-background p-4 shadow-lg transition-[opacity,translate] duration-250 ease-[cubic-bezier(0.23,1,0.32,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:data-ending-style:translate-y-4 motion-safe:data-starting-style:translate-y-4'
    >
      <Toast.Title className='text-sm font-medium' />
      <Toast.Description className='text-sm text-muted-foreground' />
    </Toast.Root>
  ));
}