@selfcommunity/react-ui/lib/cjs/components/OnBoardingWidget/Skeleton.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const constants_1 = require("./constants");
const classes = {
    root: `${constants_1.PREFIX}-skeleton-root`,
    menu: `${constants_1.PREFIX}-skeleton-menu`,
    content: `${constants_1.PREFIX}-skeleton-content`
};
const Root = (0, material_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'SkeletonRoot'
})(() => ({}));
function OnBoardingWidgetSkeleton() {
    const theme = (0, material_1.useTheme)();
    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
    const steps = Array(isMobile ? 3 : 5).fill(null);
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.menu }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'space-evenly' } }, { children: steps.map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 80 }), variant: "outlined" }, index))) }))) : ((0, jsx_runtime_1.jsx)(material_1.List, { children: steps.map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 20, height: 20 }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 100 }) })] }) }, index))) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '20%', height: 40 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '80%', height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '70%', height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '60%', height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 100, height: 36, style: { borderRadius: '20px', alignSelf: 'center', marginTop: 24 } })] }))] })));
}
exports.default = OnBoardingWidgetSkeleton;