phx-react
Version:
PHX REACT
19 lines • 2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXBadge = PHXBadge;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../types");
const icon_1 = require("./assets/icon");
function PHXBadge({ text, type = 'default', className, removeButton, onClick, hideIcon = false }) {
const typeClassName = (0, types_1.classNames)(type === 'default' && 'bg-neutral-100 text-neutral-700', type === 'success' && 'bg-green-100 text-green-700', type === 'informational' && 'bg-blue-100 text-blue-700', type === 'attention' && 'bg-yellow-100 text-yellow-700', type === 'warning' && 'bg-orange-100 text-orange-700 ', type === 'danger' && 'bg-red-100 text-red-700');
return (react_1.default.createElement("div", { className: `rounded-xl text-center py-0.5 text-xs font-normal leading-4 w-fit px-2 ${typeClassName} ${className}` },
!hideIcon && (react_1.default.createElement("span", { className: 'inline-block align-middle w-[12px] h-[12px] mr-1' },
react_1.default.createElement("img", { alt: 'icon', className: (0, types_1.classNames)('h-[12px] w-[12px] text-gray-950'), height: 100, src: icon_1.Icons[type.toUpperCase()], width: 100 }))),
react_1.default.createElement("span", { className: 'inline-block align-middle text-xs' }, text),
removeButton && (react_1.default.createElement("span", { className: 'inline-block align-middle pl-0.5 rounded-lg hover:bg-gray-300' },
react_1.default.createElement("button", { onClick: onClick, className: 'flex justify-center items-center' },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '1.5', stroke: 'currentColor', className: 'w-3 h-3' },
react_1.default.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6 18L18 6M6 6l12 12' })))))));
}
//# sourceMappingURL=Badge.js.map