Show an Error Toast using DaisyUI

Daisy-Toast.tsx

import React, { useEffect } from "react";

type ToastProps = {
  message: string;
  show: boolean;
  setShow: React.Dispatch<React.SetStateAction<boolean>>;
};

const Toast: React.FC<ToastProps> = ({ message, show, setShow }) => {
  useEffect(() => {
    if (show) {
      const timer = setTimeout(() => {
        setShow(false);
      }, 1500); // wait for 1.5 seconds
      return () => clearTimeout(timer);
    }
  }, [show, setShow]);

  function showToast() {
    return (
      <div className="fixed bottom-4 right-4 z-50 min-w-[200px] transition-opacity duration-300">
        <div role="alert" className="alert alert-error shadow-lg px-4 py-2 rounded-md">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 shrink-0 stroke-current"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <span>{message}</span>
        </div>
      </div>
    );
  }

  function noToast() {
    return <></>;
  }

  return show ? showToast() : noToast();
};

export default Toast;