@selfcommunity/react-ui/lib/esm/components/CommunityPaywalls/Skeleton.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMediaQuery, useTheme, styled } from '@mui/material';
import { PREFIX } from './constants';
import classNames from 'classnames';
import PaymentProductSkeleton from '../PaymentProduct/Skeleton';
import Grid from '@mui/material/Unstable_Grid2';
import { useThemeProps } from '@mui/system';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    products: `${PREFIX}-products`
};
const Root = styled(Grid, {
    name: PREFIX,
    slot: 'SkeletonRoot'
})(() => ({
    overflow: 'hidden'
}));
/**
 * > API documentation for the Community-JS CommunityPaywall Skeleton component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {CommunityPaywallSkeleton} from '@selfcommunity/react-ui';
 ```

 #### Component Name

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

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCCommunityPaywallSkeleton-skeleton-root|Styles applied to the root element.|
 *
 */
export default function CommunityPaywallsSkeleton(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: `${PREFIX}Skeleton`
    });
    const { className, PaymentProductSkeletonComponentProps } = props, rest = __rest(props, ["className", "PaymentProductSkeletonComponentProps"]);
    // HOOKS
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 4 }, rest, { children: [...Array(isMobile ? 2 : 3)].map((product, index) => (_jsx(Grid, Object.assign({ xs: 4 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ variant: 'outlined' }, PaymentProductSkeletonComponentProps)) }), index))) })));
}