@elacity-js/uikit/dist/components/ListGroup.js

React / Material UI Design kit for Elacity project

import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Box, Typography, Grid, Skeleton, Avatar, Link } from '@mui/material';
import { styled } from '@mui/material/styles';
import { RouterLink } from './Link.js';

const Wrapper = styled(Box)(({ theme }) => ({
    margin: theme.spacing(4, 'auto', 6),
}));
const TitleTypography = styled(Typography)(({ theme }) => ({
    color: theme.palette.text.primary,
    fontWeight: 500,
    padding: theme.spacing(1, 0, 2),
    textAlign: 'center',
}));
const CardGrid = styled(Grid)(({ theme }) => ({
    [theme.breakpoints.up('lg')]: {
        paddingTop: theme.spacing(2),
        paddingLeft: theme.spacing(4),
    },
    [theme.breakpoints.between(348, 'sm')]: {
        fontSize: theme.typography.pxToRem(15),
        '& svg': {
            fontSize: theme.typography.pxToRem(18),
        },
        '& .MuiCardHeader-root': {
            paddingLeft: 0,
        },
    },
}));
var ListGroup = (_a) => {
    var { loading, hideEmpty, title, assets, renderItem, keyExtractor, EmptyComponent, seeMoreLink, seeMoreText, containerSx } = _a, props = __rest(_a, ["loading", "hideEmpty", "title", "assets", "renderItem", "keyExtractor", "EmptyComponent", "seeMoreLink", "seeMoreText", "containerSx"]);
    if (!loading && (assets === null || assets === void 0 ? void 0 : assets.length) === 0) {
        if (hideEmpty) {
            return null;
        }
        if (EmptyComponent) {
            return jsx(EmptyComponent, {});
        }
        return (jsx(Box, Object.assign({ sx: { pb: 2 } }, { children: jsx(Typography, Object.assign({ variant: "subtitle2", fontWeight: "normal" }, { children: "No assets" })) })));
    }
    return (jsxs(Wrapper, Object.assign({}, props, { children: [title && jsx(TitleTypography, Object.assign({ variant: "h5" }, { children: title })), jsxs(Grid, Object.assign({ container: true, spacing: 1, sx: containerSx }, { children: [loading
                        ? new Array(12).fill(0).map((_, i) => (jsx(CardGrid, Object.assign({ item: true, xs: 6, sm: 3, md: 3, lg: 3 }, { children: jsxs(Box, Object.assign({ sx: { mt: 2, display: 'flex', alignItems: 'center' } }, { children: [jsx(Skeleton, Object.assign({ variant: "circular", sx: { mr: 1 } }, { children: jsx(Avatar, {}) })), jsx(Skeleton, { variant: "text", height: 40, width: "75%" })] })) }), `$g.index.${i + 1}`)))
                        : assets.map((item, index) => (jsx(CardGrid, Object.assign({ item: true, xs: 12, sm: 6, md: 3, lg: 3 }, { children: renderItem(item) }), keyExtractor(item, index)))), seeMoreLink && (jsx(Grid, Object.assign({ item: true, xs: 12, sx: { textAlign: 'right', pt: 1 } }, { children: jsxs(Link, Object.assign({ component: RouterLink, to: seeMoreLink, underline: "hover", color: "inherit" }, { children: [seeMoreText || 'See more', ' ', "\u21C0"] })) })))] }))] })));
};

export { ListGroup as default };
//# sourceMappingURL=ListGroup.js.map