"use client"; import React, { useEffect } from "react"; import { motion, AnimatePresence, Variants } from "framer-motion"; import { CheckCircle2, XCircle, Info, X } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type ToastType = "success" | "error" | "info"; export interface BasicToastNotificationProps { isVisible: boolean; onClose: () => void; title: string; description?: string; type?: ToastType; duration?: number; className?: string; } const toastVariants: Variants = { initial: { opacity: 0, y: 50, scale: 0.9 }, animate: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 100, damping: 15 } }, exit: { opacity: 0, scale: 0.9, transition: { duration: 0.2 } }, }; export function BasicToastNotification({ isVisible, onClose, title, description, type = "info", duration = 3000, className, }: BasicToastNotificationProps) { useEffect(() => { if (isVisible && duration > 0) { const timer = setTimeout(() => { onClose(); }, duration); return () => clearTimeout(timer); } }, [isVisible, duration, onClose]); const icons = { success: , error: , info: , }; const progressColors = { success: "bg-emerald-500", error: "bg-rose-500", info: "bg-blue-500", }; return ( {isVisible && (

{icons[type]}

{title}

{description && (

{description}

)}

{duration > 0 && (

)} )} ); } export default function BasicToastNotificationDemo() { const [toastConfig, setToastConfig] = React.useState<{ isVisible: boolean; type: ToastType; title: string; description: string; }>({ isVisible: false, type: "success", title: "", description: "", }); const showToast = (type: ToastType, title: string, description: string) => { setToastConfig({ isVisible: false, type, title, description }); setTimeout(() => { setToastConfig({ isVisible: true, type, title, description }); }, 100); }; return (

Toast Notifications

Click the buttons below to trigger different toast states.

setToastConfig((prev) => ({ ...prev, isVisible: false }))} type={toastConfig.type} title={toastConfig.title} description={toastConfig.description} duration={3000} className="absolute bottom-6 right-6" />

); }