phx-react/dist/cjs/components/Banner/Banner.js

PHX REACT

"use strict";
'use client';
exports.__esModule = true;
exports.PHXBanner = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var types_1 = require("../types");
var Button_1 = require("../Button");
var PHXBanner = function (_a) {
    var _b = _a.type, type = _b === void 0 ? 'informational' : _b, className = _a.className, title = _a.title, description = _a.description, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c, onClose = _a.onClose, show = _a.show, action = _a.action, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, dangerAction = _a.dangerAction, children = _a.children;
    var classNameType = (0, types_1.classNames)(type === 'informational' && 'bg-[#91d0ff]', type === 'success' && 'bg-[#29845a] text-white', type === 'warning' && 'bg-[#ffb800]', type === 'danger' && 'bg-[#e51c00] text-white');
    var Icon = function () { return (react_1["default"].createElement(react_1["default"].Fragment, null,
        type === 'informational' && (react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1["default"].createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' }))),
        type === 'success' && (react_1["default"].createElement("svg", { className: 'mr-2 h-3 w-3', fill: 'none', stroke: 'currentColor', strokeWidth: '3', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1["default"].createElement("path", { d: 'M4.5 12.75l6 6 9-13.5', strokeLinecap: 'round', strokeLinejoin: 'round' }))),
        type === 'warning' && (react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1["default"].createElement("path", { d: 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' }))),
        type === 'danger' && (react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1["default"].createElement("path", { d: 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' }))))); };
    return show ? (react_1["default"].createElement("div", { className: "flex w-full flex-col rounded-lg border bg-white text-xs shadow-[0rem_0.1rem_0rem_#00000012] ".concat(className) },
        react_1["default"].createElement("div", { className: "flex items-center justify-between rounded-tl-lg rounded-tr-lg bg-[#29845a] px-3 py-2 font-medium leading-3 ".concat(classNameType) },
            react_1["default"].createElement("div", { className: 'flex items-center' },
                react_1["default"].createElement(Icon, null),
                react_1["default"].createElement("span", null, title)),
            react_1["default"].createElement("div", null,
                react_1["default"].createElement("button", { className: "rounded-md p-1 hover:bg-[#1a1a1a0d] hover:text-gray-600 ".concat(hideCloseButton ? 'invisible' : ''), type: 'button', onClick: onClose },
                    react_1["default"].createElement("span", { className: 'sr-only' }, "Close"),
                    react_1["default"].createElement("svg", { className: 'h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
                        react_1["default"].createElement("path", { d: 'M6 18L18 6M6 6l12 12', strokeLinecap: 'round', strokeLinejoin: 'round' }))))),
        react_1["default"].createElement("div", { className: 'px-4' },
            react_1["default"].createElement("div", { className: 'pb-3 pt-3.5 text-gray-600' }, description),
            children && react_1["default"].createElement("div", { className: 'pb-3' }, children),
            action || primaryAction || secondaryAction || dangerAction ? (react_1["default"].createElement("div", { className: 'pb-4 flex gap-x-2' },
                action && (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', secondary: true, onClick: action.onClick }, action.content)),
                primaryAction && (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', primary: true, onClick: primaryAction.onClick }, primaryAction.content)),
                secondaryAction && (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', secondary: true, onClick: secondaryAction.onClick }, secondaryAction.content)),
                dangerAction && (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', danger2: true, onClick: dangerAction.onClick }, dangerAction.content)))) : (react_1["default"].createElement(react_1["default"].Fragment, null))))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
};
exports.PHXBanner = PHXBanner;
//# sourceMappingURL=Banner.js.map