@selfcommunity/react-ui/lib/esm/components/EditCourse/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, Skeleton, Stack, styled } from '@mui/material';
import LessonsSkeleton from './Lessons/Skeleton';
import UsersSkeleton from './Users/Skeleton';
import CourseFormSkeleton from '../CourseForm/Skeleton';
import OptionsSkeleton from './Options/Skeleton';
import { SCCourseEditTabType } from '../../types';
import { memo } from 'react';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    header: `${PREFIX}-header`,
    tabList: `${PREFIX}-tab-list`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonRoot',
    overridesResolver: (_props, styles) => styles.skeletonRoot
})(() => ({}));
function EditCourseSkeleton(props) {
    // PROPS
    const { tab } = props;
    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "125px", height: "21px" })] })), _jsx(Stack, Object.assign({ className: classes.tabList }, { children: Array.from(new Array(5)).map((_, i) => (_jsx(Skeleton, { animation: "wave", variant: "text", width: "80px", height: "21px" }, i))) })), tab === SCCourseEditTabType.LESSONS && _jsx(LessonsSkeleton, {}), tab === SCCourseEditTabType.CUSTOMIZE && _jsx(CourseFormSkeleton, {}), tab === SCCourseEditTabType.USERS && _jsx(UsersSkeleton, {}), tab === SCCourseEditTabType.REQUESTS && _jsx(UsersSkeleton, {}), tab === SCCourseEditTabType.OPTIONS && _jsx(OptionsSkeleton, {})] })));
}
export default memo(EditCourseSkeleton);