@selfcommunity/react-templates/lib/esm/components/LoyaltyProgramDetail/Skeleton.js

React Templates Components to integrate a Community created with SelfCommunity.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Typography, Grid, Skeleton, Box, useTheme, useMediaQuery, styled } from '@mui/material';
import PrizeItemSkeleton from './PrizeItemSkeleton';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    title: `${PREFIX}-title`,
    sectionTitle: `${PREFIX}-section-title`,
    subTitle: `${PREFIX}-sub-title`,
    pointsList: `${PREFIX}-points-list`,
    chip: `${PREFIX}-chip`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonRoot'
})(() => ({}));
/**
 * > API documentation for the Community-JS Loyalty Program Detail Skeleton component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {LoyaltyProgramDetailSkeleton} from '@selfcommunity/react-templates';
 ```

 #### Component Name

 The name `SCLoyaltyProgramDetailTemplate-skeleton-root` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCLoyaltyProgramDetailTemplate-skeleton-root|Styles applied to the root element.|
 |title|.SCLoyaltyProgramDetailTemplate-title|Styles applied to the title element.|
 |sectionTitle|.SCLoyaltyProgramDetailTemplate-section-title|Styles applied to the section title element.|
 |subTitle|.SCLoyaltyProgramDetailTemplate-subTitle|Styles applied to the subTitle element.|
 |pointsList|.SCLoyaltyProgramDetailTemplate-points-list|Styles applied to the points list section.|
 |chip|.SCLoyaltyProgramDetailTemplate-chip|Styles applied to the chip element.|
 *
 */
export default function LoyaltyProgramDetailSkeleton() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Typography, Object.assign({ className: classes.title, component: "div" }, { children: [!isMobile && _jsx(Skeleton, { animation: "wave", height: 30, width: 140, variant: "text" }), _jsx(Skeleton, { animation: "wave", variant: "circular", width: 172, height: 30, className: classes.chip })] })), _jsxs(Typography, Object.assign({ className: classes.sectionTitle }, { children: [_jsx(Skeleton, { animation: "wave", height: 20, width: "50%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 17, width: "80%", variant: "text", className: classes.subTitle })] })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 146 }) })), _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: 2, className: classes.pointsList }, { children: [...Array(8)].map((_prize, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 } }, { children: _jsx(Skeleton, { animation: "wave", height: 15, width: "100%" }) }), index))) })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 140, variant: "text" }) })), _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: isMobile ? 3 : 6 }, { children: [...Array(6)].map((_prize, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 4 } }, { children: _jsx(PrizeItemSkeleton, {}) }), index))) }))] })));
}