@medalsocial/meda
Version:
Shared Meda UI shell and runtime package.
25 lines (24 loc) • 1.29 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cx } from './utils.js';
const COL_SPAN = {
1: 'col-span-1',
2: 'col-span-2 sm:col-span-2',
3: 'col-span-3 sm:col-span-3',
4: 'col-span-4 sm:col-span-4',
6: 'col-span-6 sm:col-span-6',
12: 'col-span-12',
};
const ROW_SPAN = {
1: 'row-span-1',
2: 'row-span-2',
3: 'row-span-3',
};
const PADDING = {
default: 'p-6',
feature: 'p-8',
compact: 'p-4',
};
export function MarketingBentoCard({ colSpan = 4, rowSpan = 1, variant = 'default', icon, title, description, children, href, className, }) {
const Tag = href ? 'a' : 'div';
return (_jsxs(Tag, { "data-bento-card": true, ...(href ? { href } : {}), className: cx('rounded-2xl border border-border bg-card text-card-foreground transition', PADDING[variant], COL_SPAN[colSpan], ROW_SPAN[rowSpan], href && 'hover:border-primary/40 hover:bg-card/80', className), children: [icon && (_jsx("div", { className: "mb-4 inline-flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 text-primary", children: icon })), title && _jsx("h3", { className: "text-lg font-semibold", children: title }), description && _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: description }), children] }));
}