@pagamio/frontend-commons-lib/lib/components/ui/Toast.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AiOutlineCheckCircle, AiOutlineClose, AiOutlineInfoCircle } from 'react-icons/ai';
import { MdErrorOutline } from 'react-icons/md';
const variantStyles = {
    success: {
        icon: _jsx(AiOutlineCheckCircle, { className: "h-5 w-5 text-green-500" }),
        bg: 'bg-green-100',
        text: 'text-green-700',
    },
    error: {
        icon: _jsx(MdErrorOutline, { className: "h-5 w-5 text-red-500" }),
        bg: 'bg-red-100',
        text: 'text-red-700',
    },
    info: {
        icon: _jsx(AiOutlineInfoCircle, { className: "h-5 w-5 text-blue-500" }),
        bg: 'bg-blue-100',
        text: 'text-blue-700',
    },
};
const Toast = ({ id, title, message, variant = 'info', onClose }) => {
    const currentVariant = variantStyles[variant];
    return (_jsxs("div", { className: `flex w-full max-w-xs items-center space-x-4 p-4 ${currentVariant.bg} rounded-lg shadow dark:bg-gray-800 dark:text-gray-400`, role: "alert", children: [_jsx("div", { className: "shrink-0", children: currentVariant.icon }), _jsxs("div", { className: "flex-1", children: [title && _jsx("p", { className: `text-sm font-semibold ${currentVariant.text}`, children: title }), _jsx("p", { className: "text-sm", children: message })] }), _jsx("button", { onClick: () => onClose(id), type: "button", className: "inline-flex items-center justify-center rounded-lg bg-transparent p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-700 dark:hover:text-white", "aria-label": "Close", children: _jsx(AiOutlineClose, { className: "h-5 w-5" }) })] }));
};
export default Toast;