Undo

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

type Task = { id: string; title: string };
const toastManager = Toast.createToastManager();
const TOAST =
  'flex items-center justify-between rounded-xl bg-foreground px-4 py-3 text-sm text-background shadow-lg transition-[opacity,translate] duration-200 data-ending-style:opacity-0 data-starting-style:translate-y-4 data-starting-style:opacity-0';

export function TaskList({ initialTasks }: { initialTasks: Task[] }) {
  const [tasks, setTasks] = useState(initialTasks);

  function remove(task: Task, index: number) {
    setTasks((current) => current.filter((t) => t.id !== task.id));
    void fetch(`/api/tasks/${task.id}`, { method: 'DELETE' }); // soft delete
    const toastId = toastManager.add({
      title: 'Task deleted', // 5s by default, paused on hover or focus
      actionProps: {
        children: 'Undo',
        onClick() {
          toastManager.close(toastId);
          setTasks((current) => current.toSpliced(index, 0, task));
          void fetch(`/api/tasks/${task.id}/restore`, { method: 'POST' });
        }
      }
    });
  }

  return (
    <Toast.Provider toastManager={toastManager}>
      <ul className='w-80 divide-y rounded-xl border'>
        {tasks.map((task, index) => (
          <li key={task.id} className='flex justify-between px-4 py-3 text-sm'>
            {task.title}
            <button onClick={() => remove(task, index)} className='opacity-60'>
              Delete
            </button>
          </li>
        ))}
      </ul>
      <UndoToasts />
    </Toast.Provider>
  );
}

function UndoToasts() {
  const { toasts } = Toast.useToastManager();
  return (
    <Toast.Portal>
      <Toast.Viewport className='fixed bottom-6 left-1/2 flex w-80 -translate-x-1/2 flex-col gap-2'>
        {toasts.map((toast) => (
          <Toast.Root key={toast.id} toast={toast} className={TOAST}>
            <Toast.Title />
            <Toast.Action className='font-semibold text-blue-400' />
          </Toast.Root>
        ))}
      </Toast.Viewport>
    </Toast.Portal>
  );
}