@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
12 lines (11 loc) • 1.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmptyState = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./EmptyState.css");
const Icon_1 = require("../Icon");
const EmptyState = ({ icon, title, description, action, secondaryAction, illustration, className = '', }) => {
const rootClassName = ['ds-empty-state', className].filter(Boolean).join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { className: rootClassName, children: [illustration ? ((0, jsx_runtime_1.jsx)("div", { className: "ds-empty-state__illustration", children: illustration })) : icon ? ((0, jsx_runtime_1.jsx)("div", { className: "ds-empty-state__icon", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 64 }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ds-empty-state__content", children: [(0, jsx_runtime_1.jsx)("h3", { className: "ds-empty-state__title", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "ds-empty-state__description", children: description }))] }), (action || secondaryAction) && ((0, jsx_runtime_1.jsxs)("div", { className: "ds-empty-state__actions", children: [action, secondaryAction] }))] }));
};
exports.EmptyState = EmptyState;