@ducor/react/dist/components/card.js

admin template ui interface

import { jsx as _jsx } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
var Card = function (_a) {
    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "default" : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
    // Variant styles map
    var variantStyles = {
        default: "border-gray-200 hover:border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-700 dark:hover:border-gray-600 dark:text-gray-300",
        success: "border-green-400 bg-green-50 dark:bg-green-900/30 dark:border-green-600 hover:border-green-700 dark:text-green-300",
        error: "border-red-400 bg-red-50 dark:bg-red-900/30 dark:border-red-700 hover:border-red-800 dark:text-red-300",
        warning: "border-yellow-400 bg-yellow-50 dark:bg-yellow-900/30 dark:border-yellow-600 hover:border-yellow-700 dark:text-yellow-300",
    };
    // Get the selected variant style, default to "default" if not found
    var selectedVariant = variantStyles[variant] || variantStyles["default"];
    return (_jsx("div", { className: "shadow overflow-hidden sm:rounded-lg m-4 border ".concat(selectedVariant, " ").concat(className), children: children }));
};
var CardHeader = function (_a) {
    var children = _a.children, className = _a.className;
    return (_jsx("div", { className: twMerge("px-4 py-5 sm:px-6 flex flex-col  border-b border-gray-200 dark:border-gray-600", className), children: children }));
};
var CardBody = function (_a) {
    var children = _a.children, className = _a.className;
    return _jsx("div", { className: twMerge("min-h-10", className), children: children });
};
var CardFooter = function (_a) {
    var children = _a.children, className = _a.className;
    return (_jsx("div", { className: twMerge("px-4 py-5 border-t border-gray-200 dark:border-gray-600 dark:text-gray-200", className), children: children }));
};
var CardTitle = function (_a) {
    var children = _a.children, className = _a.className;
    return (_jsx("h3", { className: twMerge("text-xl font-semibold text-gray-800   dark:text-gray-200", className), children: children }));
};
var CardSubTitle = function (_a) {
    var children = _a.children, className = _a.className;
    return (_jsx("p", { className: twMerge("mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-300", className), children: children }));
};
var CardText = function (_a) {
    var children = _a.children, className = _a.className;
    return (_jsx("p", { className: twMerge("mt-2 text-base text-gray-700 dark:text-gray-200", className), children: children })); // Customize styles as needed
};
// Export all components as part of the Card
export default Object.assign(Card, {
    Header: CardHeader,
    Body: CardBody,
    Footer: CardFooter,
    Title: CardTitle,
    SubTitle: CardSubTitle,
    Text: CardText, // Adding CardText to the export
});