@smitch/fluid
Version:
A Next/React ui-component libray.
42 lines (41 loc) • 2.69 kB
JavaScript
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';
var outlineStyles = 'border-0 outline outline-2 md:outline-4';
var solidStyles = "solid border-none";
var statuses = {
info: 'border-info bg-info-dark outline-info',
success: 'border-success bg-success-dark outline-success',
warning: 'border-warning bg-warning-dark outline-warning',
error: 'border-error bg-error-dark outline-error',
};
var solidStatuses = {
info: 'bg-info-dark',
success: 'bg-success-dark',
warning: 'bg-warning-dark',
error: 'bg-error-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], " text-light")
: "".concat(statuses[status], " text-light");
}, [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] })), _jsx("div", { className: 'text-base md:text-lg lg:text-xl mb-[1em] mt-[1em]', dangerouslySetInnerHTML: { __html: message } }), dismissable && (_jsx(CloseButton, { size: 'md', onClick: onClick, className: 'absolute right-2 top-2' }))] }));
};
export default Alert;