@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
29 lines (28 loc) • 1.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Card.css");
const Card = ({ variant = 'elevated', image, header, footer, children, onClick, className = '', }) => {
const rootClassName = [
'ds-card',
`ds-card--${variant}`,
onClick && 'ds-card--clickable',
className,
]
.filter(Boolean)
.join(' ');
const handleClick = () => {
if (onClick) {
onClick();
}
};
const handleKeyDown = (e) => {
if (onClick && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
onClick();
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: rootClassName, onClick: handleClick, onKeyDown: handleKeyDown, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [image && ((0, jsx_runtime_1.jsx)("div", { className: "ds-card__image", children: typeof image === 'string' ? ((0, jsx_runtime_1.jsx)("img", { src: image, alt: "" })) : (image) })), header && (0, jsx_runtime_1.jsx)("div", { className: "ds-card__header", children: header }), (0, jsx_runtime_1.jsx)("div", { className: "ds-card__body", children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: "ds-card__footer", children: footer })] }));
};
exports.Card = Card;