@selfcommunity/react-ui/lib/esm/components/EventMembersWidget/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 { TabContext, TabList, TabPanel } from '@mui/lab';
import { CardContent, List, ListItem, Skeleton, Stack, Tab } from '@mui/material';
import { Box, styled } from '@mui/system';
import 'swiper/css';
import { UserSkeleton } from '../User';
import Widget from '../Widget';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    content: `${PREFIX}-content`,
    title: `${PREFIX}-title`,
    tabsWrapper: `${PREFIX}-tabs-wrapper`,
    tabLabelWrapper: `${PREFIX}-tab-label-wrapper`,
    tabPanel: `${PREFIX}-tab-panel`,
    actionButton: `${PREFIX}-action-button`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'SkeletonRoot',
    overridesResolver: (_props, styles) => styles.skeletonRoot
})(() => ({}));
export default function EventMembersWidgetSkeleton() {
    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { animation: "wave", width: "53px", height: "25px", className: classes.title }), _jsxs(TabContext, Object.assign({ value: "1" }, { children: [_jsx(Box, Object.assign({ className: classes.tabsWrapper }, { children: _jsx(TabList, Object.assign({ variant: "fullWidth" }, { children: [1, 2, 3].map((_element, i) => (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "26px", height: "24px" }), _jsx(Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: `${i + 1}` }, i))) })) })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsxs(List, { children: [[1, 2, 3, 4].map((_element, i) => (_jsx(ListItem, { children: _jsx(UserSkeleton, {}) }, i))), _jsx(Skeleton, { className: classes.actionButton, animation: "wave", width: "52px", height: "20px" })] }) })), _jsx(TabPanel, { value: "2", className: classes.tabPanel }), _jsx(TabPanel, { value: "3", className: classes.tabPanel })] }))] })) })));
}