Toast

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { Switch } from "@/registry/ds/switch";
import { ToastProvider, useToast } from "@/registry/ds/toast";

function Form() {
  const toast = useToast();
  const [falla, setFalla] = useState(false);

  const guardar = () =>
    new Promise<string>((resolve, reject) => {
      window.setTimeout(() => (falla ? reject(new Error("Sin conexión")) : resolve("3 cambios")), 1500);
    });

  return (
    <div className="flex flex-col items-center gap-4">
      <Button
        variant="tonal"
        onClick={() =>
          toast.promise(guardar(), {
            loading: "Guardando cambios…",
            success: (data) => ({ title: "Cambios guardados", description: `Se actualizaron ${data}.` }),
            error: { title: "No se pudo guardar", description: "Revisá la conexión. Tu borrador sigue acá.", action: { label: "Reintentar", onClick: () => {} } },
          })
        }
      >
        Guardar cambios
      </Button>
      <Switch size="sm" label="Simular error" checked={falla} onCheckedChange={setFalla} />
    </div>
  );
}

/** Un toast que sigue una promesa: muestra "cargando", y se convierte en éxito o error con lo que devuelva */
export default function ToastPromise() {
  return (
    <ToastProvider>
      <Form />
    </ToastProvider>
  );
}

"use client";

import { Button } from "@/registry/ds/button";
import { ToastProvider, useToast } from "@/registry/ds/toast";

function Triggers() {
  const toast = useToast();
  const materias = ["Cálculo II", "Física I", "Álgebra"];

  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="tonal" size="sm" onClick={() => materias.forEach((m, i) => window.setTimeout(() => toast({ color: "success", title: `Inscripción a ${m} confirmada` }), i * 250))}>
        Tres seguidos
      </Button>
      <Button
        variant="tonal"
        size="sm"
        onClick={() =>
          toast({
            color: "warning",
            title: "Materia dada de baja",
            description: "Liberaste tu lugar en Física I.",
            timeout: 0,
            action: { label: "Deshacer", onClick: () => {} },
          })
        }
      >
        Con Deshacer (no se cierra solo)
      </Button>
      <Button variant="tonal" size="sm" onClick={() => toast({ color: "danger", title: "Se cortó la sesión", description: "Volvé a ingresar para seguir." })}>
        Error (prioridad alta)
      </Button>
    </div>
  );
}

/** Se apilan de a 3 (los demás esperan), se expanden al pasar el mouse, y se pueden arrastrar para cerrar. El error interrumpe al lector de pantalla */
export default function ToastStack() {
  return (
    <ToastProvider limit={3}>
      <Triggers />
    </ToastProvider>
  );
}