phx-react
Version:
PHX REACT
26 lines • 3.54 kB
JavaScript
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