@selfcommunity/react-ui/lib/esm/components/PaymentOrder/Skeleton.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AvatarGroup, Box, CardContent, Stack, useTheme, Skeleton, styled } from '@mui/material';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { PREFIX } from './constants';
import Widget from '../Widget';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonRoot'
})(() => ({}));
const SkeletonPreviewRoot = styled(Widget, {
    name: PREFIX,
    slot: 'SkeletonPreviewRoot'
})(() => ({}));
/**
 * > API documentation for the Community-JS PaymentOrder Skeleton component. Learn about the available props and the CSS API.

 #### Import

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

 #### Component Name

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

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCPaymentOrder-skeleton-root|Styles applied to the root element.|
 |image|.SCPaymentOrder-skeleton-image|Styles applied to the image element.|
 *
 */
export default function PaymentOrderSkeleton(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className } = props, rest = __rest(props, ["className"]);
    const theme = useTheme();
    /**
     * Renders event object
     */
    let contentObj;
    contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { width: "50%", height: "20px" })] })), _jsx(Skeleton, { width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] }))] })));
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [contentObj, _jsxs(Stack, Object.assign({ direction: "column", alignItems: "flex-start", gap: "8px", marginTop: "8px" }, { children: [_jsx(Skeleton, { width: "50%", height: "18px" }), _jsx(Skeleton, { width: "35%", height: "18px" }), _jsx(Skeleton, { width: "20%", height: "18px" })] }))] })));
}