pagamio-frontend-commons-lib/lib/components/ui/DetailsCard.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card } from 'flowbite-react';
import Button from './Button';
import LoaderComponent from './Loader';
const DetailsCard = ({ data, loading, buttonText, showButton = true, onClickButton, actionContent, }) => {
    if (loading) {
        return (_jsx("div", { className: "flex min-h-screen items-center justify-center", children: _jsx(LoaderComponent, {}) }));
    }
    if (!data || data.length === 0) {
        return null;
    }
    return (_jsx("div", { className: "flex flex-col", children: _jsxs(Card, { children: [_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: data.map((item) => {
                        const capitalizedLabel = item.label.charAt(0).toUpperCase() + item.label.slice(1);
                        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mb-1 font-medium text-sm text-gray-500 dark:text-gray-300", children: capitalizedLabel }), _jsx("div", { className: "text-gray-900 text-sm dark:text-white break-words", children: item.value })] }, item.id));
                    }) }), _jsxs("div", { className: "flex justify-end gap-2 items-center", children: [actionContent && _jsx("div", { className: "flex-1 flex flex-row text-sm justify-end", children: actionContent }), showButton && (_jsx("div", { className: `flex ${actionContent ? 'justify-end' : 'justify-center sm:justify-end'}`, children: _jsx(Button, { type: "button", variant: "primary", disabled: loading, onClick: onClickButton, className: "text-sm", children: buttonText }) }))] })] }) }));
};
export default DetailsCard;