animated-toast-promise-demo

1"use client";
2 
3import { useState } from "react";
4import {
5  AnimatedToastProvider,
6  usePromiseToast,
7} from "@/registry/default/ui/animated-toast";
8 
9function PromiseToastDemoContent() {
10  const promiseToast = usePromiseToast();
11  const [result, setResult] = useState<string>("");
12 
13  const simulateAsyncOperation = (shouldSucceed: boolean): Promise<string> => {
14    return new Promise((resolve, reject) => {
15      setTimeout(() => {
16        if (shouldSucceed) {
17          resolve("Operation completed successfully!");
18        } else {
19          reject(new Error("Operation failed!"));
20        }
21      }, 2000);
22    });
23  };
24 
25  const handleSuccess = async () => {
26    try {
27      const data = await promiseToast({
28        promise: simulateAsyncOperation(true),
29        loading: "Processing your request...",
30        success: (result) => `Success: ${result}`,
31        error: (err) => `Error: ${err.message}`,
32      });
33      setResult(data);
34    } catch (_error) {
35      // Error already handled by toast
36    }
37  };
38 
39  const handleError = async () => {
40    try {
41      const data = await promiseToast({
42        promise: simulateAsyncOperation(false),
43        loading: "Processing your request...",
44        success: (result) => `Success: ${result}`,
45        error: (err) => `Error: ${err.message}`,
46      });
47      setResult(data);
48    } catch (_error) {
49      // Error already handled by toast
50    }
51  };
52 
53  return (
54    <div className="p-8">
55      <p className="mb-4 text-muted-foreground">
56        Click buttons to simulate async operations with toast feedback.
57      </p>
58 
59      <div className="mb-4 flex flex-wrap gap-4">
60        <button
61          onClick={handleSuccess}
62          className="rounded-md bg-green-500 px-4 py-2 text-white transition-colors hover:bg-green-600"
63        >
64          Simulate Success
65        </button>
66        <button
67          onClick={handleError}
68          className="rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
69        >
70          Simulate Error
71        </button>
72      </div>
73 
74      {result && (
75        <div className="rounded-md bg-muted p-4">
76          <p className="font-medium text-sm">Result:</p>
77          <p className="text-muted-foreground text-sm">{result}</p>
78        </div>
79      )}
80    </div>
81  );
82}
83 
84export default function AnimatedToastPromiseDemo() {
85  return (
86    <AnimatedToastProvider position="top-center">
87      <PromiseToastDemoContent />
88    </AnimatedToastProvider>
89  );
90}