"use client"; import { DownloadIcon } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { toastManager } from "@/registry/default/ui/toast"; export default function Particle() { const [isGenerating, setIsGenerating] = useState(false); const [progress, setProgress] = useState(0); const abortControllerRef = useRef(null); useEffect(() => { if (!isGenerating) return; const interval = setInterval(() => { setProgress((prev) => Math.min(99, prev + Math.round(Math.random() * 8 + 2)), ); }, 300); return () => clearInterval(interval); }, [isGenerating]); async function handleDownload() { if (isGenerating) return; setIsGenerating(true); setProgress(0); abortControllerRef.current = new AbortController(); try { await toastManager.promise( new Promise((resolve, reject) => { const shouldSucceed = Math.random() > 0.2; const timeoutId = setTimeout(() => { if (shouldSucceed) { resolve("Report ready"); } else { reject(new Error("Generation failed")); } }, 4000); abortControllerRef.current?.signal.addEventListener("abort", () => { clearTimeout(timeoutId); reject(new DOMException("Cancelled", "AbortError")); }); }), { error: (err: Error) => { if (err.name === "AbortError") { return { actionProps: undefined, description: "Report generation was cancelled.", title: "Cancelled", type: "info" as const, }; } return { actionProps: undefined, description: "Please try again later.", title: "Failed to generate report", }; }, loading: { actionProps: { children: "Cancel", onClick: () => abortControllerRef.current?.abort(), }, description: "Your download will begin once ready.", title: "Generating report…", }, success: () => ({ actionProps: undefined, description: "Your file is now downloading.", title: "Download started", }), }, ); } finally { setIsGenerating(false); setProgress(0); abortControllerRef.current = null; } } return ( ); }

Toast 9

Instalação

Dependências

Registry dependencies