@selfcommunity/react-ui/lib/esm/components/EditCourse/Lessons/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 { Stack, Skeleton, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Box } from '@mui/material';
import { PREFIX } from '../constants';
const classes = {
    lessonTitle: `${PREFIX}-lesson-title`,
    lessonInfoWrapper: `${PREFIX}-lesson-info-wrapper`,
    lessonInfo: `${PREFIX}-lesson-info`,
    lessonsSectionsWrapper: `${PREFIX}-lessons-sections-wrapper`,
    lessonsSections: `${PREFIX}-lessons-sections`,
    tableContainer: `${PREFIX}-table-container`,
    margin: `${PREFIX}-margin`,
    marginLeft: `${PREFIX}-margin-left`,
    actionsWrapper: `${PREFIX}-actions-wrapper`
};
export default function LessonsSkeleton() {
    return (_jsxs(Box, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px", className: classes.lessonTitle }), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonInfo }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px" })] })), _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "105px", height: "32px" })] })), _jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "159px", height: "21px" }), _jsx(Skeleton, { animation: "wave", width: "100px", height: "32px" })] })), _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "102px", height: "32px" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "87px", height: "32px", className: classes.margin }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "48px", height: "32px", className: classes.marginLeft }) })] }) }), _jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "102px", height: "21px" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "250px", height: "54px", className: classes.margin }) }), _jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rounded", width: "105px", height: "37px" }), _jsx(Skeleton, { animation: "wave", variant: "circular", width: "36px", height: "36px" })] })) })] }) })] }) }))] }));
}