Basic Toast

1"use client";
2 
3import { AlertCircle, CheckCircle, Info, X, XCircle } from "lucide-react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useEffect, useState } from "react";
6import { createPortal } from "react-dom";
7 
8export type ToastType = "success" | "error" | "info" | "warning";
9 
10export interface ToastProps {
11  className?: string;
12  duration?: number;
13  isVisible?: boolean;
14  message: string;
15  onClose?: () => void;
16  type?: ToastType;
17}
18 
19const toastIcons = {
20  error: <XCircle className="h-5 w-5 text-red-500" />,
21  info: <Info className="h-5 w-5 text-blue-500" />,
22  success: <CheckCircle className="h-5 w-5 text-emerald-500" />,
23  warning: <AlertCircle className="h-5 w-5 text-amber-500" />,
24};
25 
26const toastClasses = {
27  error: "border-red-100 bg-red-50 dark:border-red-900 dark:bg-red-950",
28  info: "border-blue-100 bg-blue-50 dark:border-blue-900 dark:bg-blue-950",
29  success:
30    "border-emerald-100 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950",
31  warning:
32    "border-amber-100 bg-amber-50 dark:border-amber-900 dark:bg-amber-950",
33};
34 
35export default function BasicToast({
36  message,
37  type = "info",
38  duration = 3000,
39  onClose,
40  isVisible = true,
41  className = "",
42}: ToastProps) {
43  const [visible, setVisible] = useState(isVisible);
44  const [mounted, setMounted] = useState(false);
45  const shouldReduceMotion = useReducedMotion();
46 
47  useEffect(() => {
48    setMounted(true);
49  }, []);
50 
51  useEffect(() => {
52    setVisible(isVisible);
53  }, [isVisible]);
54 
55  useEffect(() => {
56    if (visible && duration > 0) {
57      const timer = setTimeout(() => {
58        setVisible(false);
59        onClose?.();
60      }, duration);
61      return () => clearTimeout(timer);
62    }
63  }, [visible, duration, onClose]);
64 
65  if (!mounted) {
66    return null;
67  }
68 
69  const toastContent = (
70    <AnimatePresence>
71      {visible ? (
72        <motion.div
73          animate={
74            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, x: 0 }
75          }
76          className={`fixed top-4 right-4 z-50 flex w-80 items-center gap-3 rounded-lg border p-4 shadow-lg ${toastClasses[type]} ${className}`}
77          exit={
78            shouldReduceMotion
79              ? { opacity: 0, transition: { duration: 0 } }
80              : {
81                  opacity: 0,
82                  scale: 0.8,
83                  transition: { duration: 0.15 },
84                  x: 50,
85                }
86          }
87          initial={
88            shouldReduceMotion
89// … truncated