animated-toast-notification-demo

1"use client";
2 
3import { useState } from "react";
4import { NotificationToast } from "@/registry/default/ui/animated-toast";
5 
6export default function AnimatedToastNotificationDemo() {
7  const [showToast, setShowToast] = useState(false);
8 
9  const showNotification = () => {
10    setShowToast(true);
11  };
12 
13  return (
14    <div className="p-8">
15      <button
16        onClick={showNotification}
17        className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
18      >
19        Show Notification
20      </button>
21 
22      <NotificationToast
23        open={showToast}
24        onClose={() => setShowToast(false)}
25        title="New Message"
26        message="You have received a new message from John Doe. Check it out!"
27        avatar="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face"
28        time="2 min ago"
29      />
30    </div>
31  );
32}