@selfcommunity/react-ui/lib/esm/components/PrivateMessageSnippets/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 List from '@mui/material/List';
import { styled } from '@mui/material/styles';
import PrivateMessageSnippetItemSkeleton from '../PrivateMessageSnippetItem/Skeleton';
import { Button, Card, CardContent, Skeleton, Stack } from '@mui/material';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    searchBar: `${PREFIX}-search-bar`,
    button: `${PREFIX}-button`,
    list: `${PREFIX}-list`
};
const Root = styled(Card, {
    name: PREFIX,
    slot: 'SkeletonRoot'
})(() => ({}));
/**
 * > API documentation for the Community-JS PrivateMessageSnippets Skeleton component. Learn about the available props and the CSS API.

 #### Import

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

 #### Component Name

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

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCPrivateMessageSnippets-skeleton-root|Styles applied to the root element.|
 |searchBar|.SCPrivateMessageSnippets-search-bar|Styles applied to the search bar element.|
 |button|.SCPrivateMessageSnippets-button|Styles applied to the button element.|
 |list|.SCPrivateMessageSnippets-list|Styles applied to the list element.|
 *
 */
export default function PrivateMessageSnippetsSkeleton(props) {
    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: _jsx(Skeleton, { height: 20, width: 100, variant: 'rectangular' }) })), _jsx(Skeleton, { height: 25, width: '100%', variant: 'rounded', className: classes.searchBar })] })), _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => (_jsx(PrivateMessageSnippetItemSkeleton, { elevation: 0 }, index))) }))] }) })));
}