MicroToast

export function MicroToastSpecimen() {
  const [toast, setToast] = useState<string | null>(null)

  function showToast(msg: string) {
    setToast(msg)
    setTimeout(() => setToast(null), 1600)
  }

  return (
    <Stage label="MicroToast · el aviso de una tarjeta repasada, como lo usa PrepChat" tall>
      <div className="flex w-full max-w-[380px] flex-col items-center gap-3 px-1 py-1">
        <Row>
          <TriggerButton onClick={() => showToast('Card scheduled for tomorrow')}>Again</TriggerButton>
          <TriggerButton onClick={() => showToast('Card scheduled in 4 days')}>Hard</TriggerButton>
          <TriggerButton onClick={() => showToast('Card scheduled in 12 days')}>Good</TriggerButton>
        </Row>
        <p className="text-center text-[11px] text-content/60">
          Los 1,6 s los pone el vertical con un `setTimeout`: la pieza no trae temporizador. Aparece
          abajo y al centro de la ventana, no adentro de este escenario.
        </p>
        <MicroToast message={toast ?? ''} visible={toast !== null} />
      </div>
    </Stage>
  )
}

De specimens/feedback.tsx · MicroToastSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.