@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
21 lines (20 loc) • 1.93 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Chip, List, ListItem, ListItemButton, ListItemIcon, ListItemText, useMediaQuery, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import Skeleton from '@mui/material/Skeleton';
import { PREFIX } from './constants';
const classes = {
root: `${PREFIX}-skeleton-root`,
menu: `${PREFIX}-skeleton-menu`,
content: `${PREFIX}-skeleton-content`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'SkeletonRoot'
})(() => ({}));
export default function OnBoardingWidgetSkeleton() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const steps = Array(isMobile ? 3 : 5).fill(null);
return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ className: classes.menu }, { children: isMobile ? (_jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'space-evenly' } }, { children: steps.map((_, index) => (_jsx(Chip, { label: _jsx(Skeleton, { variant: "text", width: 80 }), variant: "outlined" }, index))) }))) : (_jsx(List, { children: steps.map((_, index) => (_jsx(ListItem, { children: _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(Skeleton, { variant: "rectangular", width: 20, height: 20 }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 100 }) })] }) }, index))) })) })), _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "text", width: '20%', height: 40 }), _jsx(Skeleton, { variant: "text", width: '80%', height: 20 }), _jsx(Skeleton, { variant: "text", width: '70%', height: 20 }), _jsx(Skeleton, { variant: "text", width: '60%', height: 20 }), _jsx(Skeleton, { variant: "rectangular", width: 100, height: 36, style: { borderRadius: '20px', alignSelf: 'center', marginTop: 24 } })] }))] })));
}