nice-ui
Version:
React design system, components, and utilities
48 lines (47 loc) • 1.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmptyState = void 0;
const React = require("react");
const use_t_1 = require("use-t");
const nano_theme_1 = require("nano-theme");
const MiniTitle_1 = require("../../3-list-item/MiniTitle");
const blockClass = (0, nano_theme_1.rule)({
ta: 'center',
maxW: '300px',
mar: '30px auto',
});
const frameClass = (0, nano_theme_1.rule)({
w: '150px',
h: '100px',
mar: '0 auto',
bdrad: '8px',
});
const frameSmallClass = (0, nano_theme_1.rule)({
w: '100px',
h: '67px',
});
const emojiClass = (0, nano_theme_1.rule)({
fz: '50px',
lh: '100px',
});
const contentClass = (0, nano_theme_1.rule)({
w: '100%',
pad: '8px 0 0',
});
const EmptyState = ({ frame, title, emoji, illustration, small, children }) => {
const [t] = (0, use_t_1.useT)();
const theme = (0, nano_theme_1.useTheme)();
if (frame) {
title ?? (title = '');
emoji ?? (emoji = ' ');
}
return (React.createElement("div", { className: blockClass },
illustration
? illustration
: emoji !== undefined && (React.createElement("div", { className: frameClass + (small ? frameSmallClass : ''), style: { border: `1px dashed ${theme.g(0.76)}` } },
React.createElement("div", { className: emojiClass }, emoji))),
!!title || (!!children && React.createElement("br", null)),
title === undefined ? (React.createElement(MiniTitle_1.MiniTitle, null, t('Empty'))) : title ? (title ? (React.createElement(MiniTitle_1.MiniTitle, null, title || t('Empty'))) : null) : null,
!!children && React.createElement("div", { className: contentClass }, children)));
};
exports.EmptyState = EmptyState;