@smitch/fluid/lib/card/Card.js

A Next/React ui-component libray.

import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
var shadows = {
    sm: 'shadow-sm shadow-[2px_2px_2px_0_rgba(0,0,0,0.15)] rtl:shadow-[-2px_2px_2px_0_rgba(0,0,0,0.15)] dark:shadow-[2px_2px_2px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-2px_2px_2px_0_rgba(255,255,255,0.2)]',
    md: 'shadow-md shadow-[4px_4px_4px_0_rgba(0,0,0,0.15)] rtl:shadow-[-4px_4px_4px_0_rgba(0,0,0,0.15)] dark:shadow-[4px_4px_4px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-4px_4px_4px_0_rgba(255,255,255,0.2)]',
    lg: 'shadow-lg shadow-[6px_6px_6px_0_rgba(0,0,0,0.15)] rtl:shadow-[-6px_6px_10px_6px_rgba(0,0,0,0.15)] dark:shadow-[6px_6px_6px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-6px_6px_6px_0_rgba(255,255,255,0.2)]',
    xl: 'shadow-xl shadow-[8px_8px_8px_0_rgba(0,0,0,0.15)] rtl:shadow-[-8px_8px_8px_0_rgba(0,0,0,0.15)] dark:shadow-[8px_8px_8px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-8px_8px_8px_0_rgba(255,255,255,0.2)]',
    none: 'shadow-none',
};
var layouts = {
    col: 'col flex flex-col',
    col_reverse: 'col flex flex-col-reverse',
    row: 'row grid grid-cols-4',
};
var roundeds = {
    none: '',
    sm: 'rounded-sm overflow-hidden',
    md: 'rounded-md overflow-hidden',
    lg: 'rounded-lg overflow-hidden',
    xl: 'rounded-xl overflow-hidden',
};
var Card = function (_a) {
    var _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, _c = _a.shadow, shadow = _c === void 0 ? 'none' : _c, children = _a.children, _d = _a.layout, layout = _d === void 0 ? 'col' : _d, _e = _a.rounded, rounded = _e === void 0 ? 'none' : _e, _f = _a.outline, outline = _f === void 0 ? true : _f;
    var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
    var shadowClasses = useMemo(function () { return (shadow ? "".concat(shadows[shadow]) : ''); }, [shadow]);
    var roundedClasses = useMemo(function () { return roundeds[rounded]; }, [rounded]);
    var outlineClasses = useMemo(function () { return (outline ? 'border border-dark/[.20] dark:border-light/[.20]' : ''); }, [outline]);
    return (_jsx("div", { className: twMerge("card group relative bg-light text-dark dark:bg-dark dark:text-light ".concat(shadowClasses, " ").concat(layoutClasses, " ").concat(roundedClasses, " ").concat(outlineClasses), className), style: style, "data-testid": 'card', children: children }));
};
export default Card;