@smitch/fluid/lib/alert/Alert.js

A lightweight, Tailwind-powered React/Next.js UI component library.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { CloseButton, Heading, Badge } from "..";
var defaultStyles = "border-s-8 bg-slate-50 text-dark dark:bg-slate-700 dark:text-light";
var outlineStyles = "border-0 outline outline-2 md:outline-4 bg-slate-50 text-dark dark:bg-slate-700 dark:text-light";
var solidStyles = "solid border-none";
var statuses = {
    info: "border-info outline-info",
    success: "border-success outline-success",
    warning: "border-warning outline-warning",
    error: "border-error outline-error",
    dark: "border-slate-600 outline-slate-600",
    light: "border-white outline-white",
};
var solidStatuses = {
    info: "bg-info-light text-dark",
    success: "bg-success-light text-dark",
    warning: "bg-warning-light text-dark",
    error: "bg-error-light text-dark",
    dark: "bg-slate-700 text-light",
    light: "bg-slate-50 text-dark",
};
var layouts = {
    default: defaultStyles,
    outline: outlineStyles,
    solid: solidStyles,
};
var roundeds = {
    none: "rounded-0",
    md: "rounded",
    lg: "rounded-lg",
};
var Alert = function (_a) {
    var _b = _a.className, className = _b === void 0 ? "" : _b, style = _a.style, _c = _a.status, status = _c === void 0 ? "info" : _c, _d = _a.layout, layout = _d === void 0 ? "default" : _d, title = _a.title, message = _a.message, _e = _a.dismissable, dismissable = _e === void 0 ? false : _e, onClick = _a.onClick, badge = _a.badge, _f = _a.badgeBackground, badgeBackground = _f === void 0 ? "dark" : _f, _g = _a.badgeColor, badgeColor = _g === void 0 ? "light" : _g, _h = _a.rounded, rounded = _h === void 0 ? "none" : _h;
    var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
    var roundedClasses = useMemo(function () { return roundeds[rounded]; }, [rounded]);
    var statusClasses = useMemo(function () { return (layout === "solid" ? "".concat(solidStatuses[status]) : "".concat(statuses[status])); }, [layout, status]);
    return (_jsxs("blockquote", { className: twMerge("alert group relative px-2 md:px-3 lg:px-4 py-1 ".concat(statusClasses, " ").concat(layoutClasses, " ").concat(roundedClasses), className), style: style, "data-testid": "alert", role: "alert", children: [title && (_jsxs(Heading, { level: 5, className: "mt-2 mb-0 uppercase font-bold opacity-85 relative", children: [badge && (_jsx(Badge, { badgeBackground: badgeBackground, badgeColor: badgeColor, size: "md", layout: "circle", position: "left", className: "top-0 start-0 relative mr-2", children: badge })), title] })), typeof message === "string" ? (_jsx("div", { className: "text-base md:text-lg lg:text-xl mb-[1em] mt-[1em]", dangerouslySetInnerHTML: { __html: message } })) : (_jsx("div", { className: "text-base md:text-lg lg:text-xl mb-[1em] mt-[1em]", children: message })), dismissable && (_jsx(CloseButton, { size: "md", onClick: onClick, className: "absolute right-2 top-2" }))] }));
};
export default Alert;
//# sourceMappingURL=Alert.js.map