phx-react
Version:
PHX REACT
15 lines • 1.73 kB
JavaScript
import React from 'react';
import { classNames } from '../types';
import { Icons } from './assets/icon';
export function PHXBadge({ text, type = 'default', className, removeButton, onClick, hideIcon = false }) {
const typeClassName = 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.createElement("div", { className: `rounded-xl text-center py-0.5 text-xs font-normal leading-4 w-fit px-2 ${typeClassName} ${className}` },
!hideIcon && (React.createElement("span", { className: 'inline-block align-middle w-[12px] h-[12px] mr-1' },
React.createElement("img", { alt: 'icon', className: classNames('h-[12px] w-[12px] text-gray-950'), height: 100, src: Icons[type.toUpperCase()], width: 100 }))),
React.createElement("span", { className: 'inline-block align-middle text-xs' }, text),
removeButton && (React.createElement("span", { className: 'inline-block align-middle pl-0.5 rounded-lg hover:bg-gray-300' },
React.createElement("button", { onClick: onClick, className: 'flex justify-center items-center' },
React.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.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6 18L18 6M6 6l12 12' })))))));
}
//# sourceMappingURL=Badge.js.map