phx-react
Version:
PHX REACT
35 lines • 5.35 kB
JavaScript
'use client';
import React from 'react';
import { classNames } from '../types';
import { PHXButton } from '../Button';
export const PHXBanner = ({ type = 'informational', className, title, description, hideCloseButton = false, onClose, show, action, primaryAction, secondaryAction, dangerAction, children, }) => {
const classNameType = classNames(type === 'informational' && 'bg-[#91d0ff]', type === 'success' && 'bg-[#29845a] text-white', type === 'warning' && 'bg-[#ffb800]', type === 'danger' && 'bg-[#e51c00] text-white');
const Icon = () => (React.createElement(React.Fragment, null,
type === 'informational' && (React.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.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.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.createElement("path", { d: 'M4.5 12.75l6 6 9-13.5', strokeLinecap: 'round', strokeLinejoin: 'round' }))),
type === 'warning' && (React.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.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.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.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.createElement("div", { className: `flex w-full flex-col rounded-lg border bg-white text-xs shadow-[0rem_0.1rem_0rem_#00000012] ${className}` },
React.createElement("div", { className: `flex items-center justify-between rounded-tl-lg rounded-tr-lg bg-[#29845a] px-3 py-2 font-medium leading-3 ${classNameType}` },
React.createElement("div", { className: 'flex items-center' },
React.createElement(Icon, null),
React.createElement("span", null, title)),
React.createElement("div", null,
React.createElement("button", { className: `rounded-md p-1 hover:bg-[#1a1a1a0d] hover:text-gray-600 ${hideCloseButton ? 'invisible' : ''}`, type: 'button', onClick: onClose },
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: 'px-4' },
description && React.createElement("div", { className: 'pb-3 pt-3.5 text-gray-600' }, description),
children && React.createElement("div", { className: 'pb-3' }, children),
action || primaryAction || secondaryAction || dangerAction ? (React.createElement("div", { className: 'pb-4 flex gap-x-2' },
action && (React.createElement(PHXButton, { size: 'small', secondary: true, disabled: action === null || action === void 0 ? void 0 : action.disabled, loading: action === null || action === void 0 ? void 0 : action.loading, onClick: action.onClick }, action.content)),
primaryAction && (React.createElement(PHXButton, { size: 'small', primary: true, disabled: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.disabled, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, onClick: primaryAction.onClick }, primaryAction.content)),
secondaryAction && (React.createElement(PHXButton, { size: 'small', disabled: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.disabled, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, secondary: true, onClick: secondaryAction.onClick }, secondaryAction.content)),
dangerAction && (React.createElement(PHXButton, { size: 'small', danger2: true, disabled: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.disabled, loading: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.loading, onClick: dangerAction.onClick }, dangerAction.content)))) : (React.createElement(React.Fragment, null))))) : (React.createElement(React.Fragment, null));
};
//# sourceMappingURL=Banner.js.map