UNPKG

phx-react

Version:

PHX REACT

26 lines 3.54 kB
import React from 'react'; import EmptySvg from './EmptySvg'; import { PHXButton } from '../Button'; import { PHXSpinner } from '../Loading'; export function PHXEmptyRecord({ border, className, description = 'Dữ liệu đang trống.', icon, loading, primaryAction, secondaryAction, title = 'Trống', type = 'default', }) { const renderActionComponent = () => (React.createElement("div", { className: 'flex flex-row-reverse flex-wrap items-center justify-center gap-2 pt-3' }, 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)))); return (React.createElement("div", { className: className }, type === 'default' && (React.createElement("div", { className: `flex min-w-full flex-col items-center bg-white px-4 py-2 pb-14 pt-16 text-center align-middle sm:rounded-lg md:px-6 md:pr-0 lg:px-8 ${border ? 'border shadow' : ''}` }, !loading ? (React.createElement(React.Fragment, null, React.createElement(EmptySvg, { icon: icon }), React.createElement("p", { className: ' mt-3 text-sm font-semibold text-gray-900' }, title), React.createElement("span", { className: 'mt-1 text-[12px] font-medium text-gray-500' }, description), primaryAction || secondaryAction ? renderActionComponent() : React.createElement(React.Fragment, null))) : (React.createElement(PHXSpinner, null)))), type === 'small' && (React.createElement("div", { className: `flex min-w-full flex-col items-center bg-white px-4 py-2 pb-10 pt-10 text-center align-middle sm:rounded-lg md:px-6 md:pr-0 lg:px-8 ${border ? 'border shadow' : ''}` }, !loading ? (React.createElement(React.Fragment, null, React.createElement(EmptySvg, { icon: icon }), React.createElement("p", { className: 'text-sm font-semibold text-gray-900' }, title), React.createElement("span", { className: 'mt-1 text-[12px] font-medium text-gray-500' }, description), primaryAction || secondaryAction ? renderActionComponent() : React.createElement(React.Fragment, null))) : (React.createElement(PHXSpinner, null)))), type === 'micro' && (React.createElement("div", { className: `flex min-w-full flex-col items-center bg-white px-4 py-2 pb-5 pt-8 text-center align-middle sm:rounded-lg md:px-6 md:pr-0 lg:px-8 ${border ? 'border shadow' : ''}` }, !loading ? (React.createElement(React.Fragment, null, React.createElement(EmptySvg, { icon: icon }), React.createElement("p", { className: 'text-sm font-semibold text-gray-900' }, title), React.createElement("span", { className: 'mt-1 text-[12px] font-medium text-gray-500' }, description), primaryAction || secondaryAction ? renderActionComponent() : React.createElement(React.Fragment, null))) : (React.createElement(PHXSpinner, null)))))); } //# sourceMappingURL=EmptyRecord.js.map