@selfcommunity/react-ui/lib/esm/components/UserProfileHeader/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 { Box, Button, Icon, IconButton, Stack, Typography, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import Skeleton from '@mui/material/Skeleton';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    cover: `${PREFIX}-cover`,
    avatar: `${PREFIX}-avatar`,
    actions: `${PREFIX}-actions`,
    section: `${PREFIX}-section`,
    username: `${PREFIX}-username`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonRoot'
})(() => ({}));
/**
 * > API documentation for the Community-JS User Profile AppBar Skeleton component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {UserProfileHeaderSkeleton} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCUserProfileHeader-skeleton-root` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
 |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
 |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
 |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
 |section|.SCUserProfileHeader-section|Styles applied to the info section.|
 |username|.SCUserProfileHeader-username|Styles applied to the username element.|
 *
 */
function UserProfileHeaderSkeleton() {
    const theme = useTheme();
    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }), _jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge }) })), _jsxs(Box, Object.assign({ className: classes.section }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.username }, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } }) })), _jsxs(Stack, Object.assign({ direction: "row", className: classes.actions }, { children: [_jsx(Button, Object.assign({ variant: "contained", disabled: true }, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: 60 } }) })), _jsx(IconButton, Object.assign({ disabled: true }, { children: _jsx(Icon, { children: "more_vert" }) }))] }))] }))] })));
}
export default UserProfileHeaderSkeleton;