score:0

const getIconColor = (type) => {
    if (type === 'warning') {
        return 'yellow-500'
    } else if (type === 'error') {
        return 'red-600'
    }

    return 'green-600'
}

const getIcon = (type) => {
    if (type === 'success') {
        return CheckCircleIcon
    } else if (type === 'warning') {
        return XCircleIcon
    }

    return ExclamationIcon;
}

const Toast = (props) => {
    /* type of toast can be success, warning and error */
    const { type, message, show, handleClose } = props;
    const wrapperRef = React.useRef(null);

    useOutsideClickAlert({ ref: wrapperRef, onOutsideClick: handleClose });

    React.useEffect(() => {
        // ...
    }, [handleClose, show])

    if (!show) {
        return null;
    }

    const color = getIconColor(type);
    const Icon = getIcon(type);

    return (
        <Transition
            // ...
        >
            // ...
        </Transition>
    );        
);

score:0

import React from 'react'
import {
    CheckCircleIcon,
    XCircleIcon,
    ExclamationIcon,
    XIcon
} from '@heroicons/react/outline';
import useOutsideClickAlert from "../hooks/useOutsideClickAlert"
import { Transition } from '@headlessui/react'

const Toast = (props) => {
    /* type of toast can be success, warning or error */
    const { type, message, show, handleClose } = props;
    const wrapperRef = React.useRef(null);

    function getColor(type) {
        if (type === 'warning') {
            return 'bg-yellow-500'
        } else if (type === 'error') {
            return 'bg-red-600'
        }
        return 'bg-green-600'
    }

    function getIcon(type) {
        if (type === 'warning') {
            return XCircleIcon
        } else if (type === 'error') {
            return ExclamationIcon
        }
        return CheckCircleIcon
    }

    const color = getColor(type);
    const Icon = getIcon(type);

    useOutsideClickAlert({ ref: wrapperRef, onOutsideClick: handleClose });

    React.useEffect(() => {
        if (show) {
            const timer = setTimeout(() => {
                handleClose();
            }, 3000);
            return () => clearTimeout(timer);
        }
    }, [handleClose, show])

    if (!show) {
        return null;
    }

    return (
        <>
            <Transition
                show={show}
                enter="transition-opacity duration-500"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="transition-opacity duration-500"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
            >
                {/* bg-${color} */}
                <div
                    className={`flex absolute right-0 z-50 w-96 ${color} rounded-l-md mt-2`}
                    ref={wrapperRef}
                >
                    <div className="col-start-1 col-span-2 py-2 px-2 justify-self-center place-self-center">
                        <Icon className="h-12 text-white" />
                    </div>
                    <div className="col-start-3 col-span-6 text-left pt-2 pb-3 px-2 text-white place-self-center w-full relative">
                        <p className="text-xl">{type[0].toUpperCase() + type.substring(1)}</p>
                        <p className="text-sm">{message}</p>
                        <XIcon
                            className="h-5 text-white absolute top-1 right-2 cursor-pointer"
                            onClick={handleClose}
                        />
                    </div>
                </div>
            </Transition>
        </>
    )
}

export default Toast


Related Query

More Query from same tag