phx-react
Version:
PHX REACT
28 lines • 3.99 kB
JavaScript
'use client';
import React from 'react';
import { PHXButton } from '../Button';
import { classNames } from '../types';
import Icon from './Icon';
export const PHXBannerWithCard = ({ action, children, className, dangerAction, description, hideCloseButton = false, onClose, primaryAction, secondaryAction, show, title, type = 'informational', hideIcon = false, }) => {
const classNameType = classNames(type === 'informational' && 'bg-[#EAF4FF] text-[#00527C]', type === 'success' && 'bg-[#CDFEE1] text-[#0C5132]', type === 'warning' && 'bg-[#FFF1E3] text-[#5E4200]', type === 'danger' && 'bg-[#FEE9E8] text-[#8E1F0B]');
return show ? (React.createElement("div", { className: classNames('rounded-lg p-2 shadow-[0rem_0.0825rem_0rem_#00000012]', classNameType, className) },
React.createElement("div", { className: classNames('flex items-center justify-between text-xs font-semibold leading-5') },
React.createElement("div", { className: 'flex' },
!hideIcon && (React.createElement("div", { className: 'flex-shrink-0' },
React.createElement(Icon, { type: type }))),
title && React.createElement("span", null, title),
!title && description && React.createElement("div", { className: 'max-w-full text-xs font-normal' }, description)),
!hideCloseButton && (React.createElement("button", { className: `rounded-md p-1 hover:bg-[#1a1a1a0d] hover:text-gray-600 ${hideCloseButton ? 'invisible' : ''}`, onClick: onClose, type: 'button' },
React.createElement("span", { className: 'sr-only' }, "Close"),
React.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.createElement("path", { d: 'M6 18L18 6M6 6l12 12', strokeLinecap: 'round', strokeLinejoin: 'round' }))))),
React.createElement("div", { className: classNames('', !hideCloseButton && 'pr-6', !hideIcon && 'pl-[1.65rem]') },
title && description && React.createElement("div", { className: 'max-w-full pt-1 text-xs font-normal' }, description),
children && React.createElement("div", { className: 'pt-3' }, children),
action || primaryAction || secondaryAction || dangerAction ? (React.createElement("div", { className: 'flex gap-x-2 pt-3' },
action && (React.createElement(PHXButton, { className: 'font-semibold', disabled: action === null || action === void 0 ? void 0 : action.disabled, loading: action === null || action === void 0 ? void 0 : action.loading, onClick: action.onClick, secondary: true, size: 'small' }, action.content)),
primaryAction && (React.createElement(PHXButton, { className: 'font-semibold', disabled: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.disabled, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, onClick: primaryAction.onClick, primary: true, size: 'small' }, primaryAction.content)),
secondaryAction && (React.createElement(PHXButton, { className: 'font-semibold', disabled: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.disabled, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, onClick: secondaryAction.onClick, secondary: true, size: 'small' }, secondaryAction.content)),
dangerAction && (React.createElement(PHXButton, { className: 'font-semibold', disabled: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.disabled, loading: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.loading, danger2: true, onClick: dangerAction.onClick, size: 'small' }, dangerAction.content)))) : (React.createElement(React.Fragment, null))))) : (React.createElement(React.Fragment, null));
};
//# sourceMappingURL=BannerWithCard.js.map