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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PREFIX } from '../constants';
import { Box, Divider, Skeleton, Stack, styled } from '@mui/material';
import HeaderSkeleton from '../Header/Skeleton';
import classNames from 'classnames';
import { AccordionLessonsSkeleton } from '../../../shared/AccordionLessons';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    student: `${PREFIX}-student`,
    userWrapper: `${PREFIX}-user-wrapper`,
    user: `${PREFIX}-user`,
    avatar: `${PREFIX}-avatar`,
    margin: `${PREFIX}-margin`,
    box: `${PREFIX}-box`,
    percentageWrapper: `${PREFIX}-percentage-wrapper`,
    lessonsSections: `${PREFIX}-lessons-sections`,
    circle: `${PREFIX}-circle`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonRoot',
    overridesResolver: (_props, styles) => styles.skeletonRoot
})(() => ({}));
export default function StudentSkeleton() {
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.student) }, { children: [_jsx(HeaderSkeleton, {}), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.user }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", className: classes.avatar }), _jsxs(Box, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "105px", height: "21px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "74px", height: "21px" })] })] })), _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "160px", height: "28px" })] })), _jsx(Divider, {}), _jsx(Skeleton, { animation: "wave", variant: "text", width: "200px", height: "21px", className: classes.margin }), _jsx(Stack, Object.assign({ className: classes.box }, { children: _jsx(Skeleton, { animation: "wave", variant: "text", height: "30px" }) })), _jsx(Skeleton, { animation: "wave", variant: "text", width: "200px", height: "21px", className: classes.margin }), _jsxs(Stack, Object.assign({ className: classes.box }, { children: [_jsxs(Stack, Object.assign({ className: classes.percentageWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "168px", height: "21px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "108px", height: "21px" })] })), _jsx(Skeleton, { animation: "wave", variant: "rectangular", height: "4px" })] })), _jsx(Skeleton, { animation: "wave", variant: "text", width: "200px", height: "21px", className: classes.margin }), _jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "58px", height: "21px" }), _jsx(Skeleton, { animation: "wave", variant: "circular", className: classes.circle }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "58px", height: "21px" })] })), _jsx(AccordionLessonsSkeleton, {})] })));
}