@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
22 lines (21 loc) • 1.53 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, CardActions, CardContent, Divider } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
import { styled } from '@mui/material/styles';
import Widget from '../Widget';
import { PREFIX } from './constants';
const classes = {
root: `${PREFIX}-skeleton-root`,
calendar: `${PREFIX}-calendar`,
content: `${PREFIX}-content`,
title: `${PREFIX}-title`,
spacing: `${PREFIX}-spacing`,
actions: `${PREFIX}-actions`
};
const Root = styled(Widget, {
name: PREFIX,
slot: 'SkeletonRoot'
})(() => ({}));
export default function CreateEventWidgetSkeleton() {
return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), _jsx(Skeleton, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), _jsx(Skeleton, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), _jsx(Divider, { className: classes.spacing })] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) }))] })));
}