UNPKG

@selfcommunity/react-ui

Version:

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

43 lines (36 loc) 1.77 kB
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { styled } from '@mui/material/styles'; import Skeleton from '@mui/material/Skeleton'; import { Box, CardContent } from '@mui/material'; import Widget from '../Widget'; import { PREFIX } from './constants'; const classes = { root: `${PREFIX}-skeleton-root`, content: `${PREFIX}-content`, input: `${PREFIX}-input`, avatar: `${PREFIX}-avatar` }; const Root = styled(Widget, { name: PREFIX, slot: 'SkeletonRoot' })(() => ({})); /** * > API documentation for the Community-JS Inline Composer Skeleton component. Learn about the available props and the CSS API. #### Import ```jsx import {InlineComposerWidgetSkeleton} from '@selfcommunity/react-ui'; ``` #### Component Name The name `SCInlineComposerWidgetSkeleton` can be used when providing style overrides in the theme. #### CSS |Rule Name|Global class|Description| |---|---|---| |root|.SCInlineComposerWidget-skeleton-root|Styles applied to the root element.| |content|.SCInlineComposerWidget-content|Styles applied to the content element.| |input|.SCInlineComposerWidget-input|Styles applied to the input element.| |avatar|.SCInlineComposerWidget-avatar|Styles applied to the avatar element.| * */ export default function InlineComposerWidgetSkeleton() { return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Box, Object.assign({ className: classes.input }, { children: _jsx(Skeleton, { animation: "wave", variant: "text" }) })), _jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Skeleton, { className: classes.avatar, animation: "wave", variant: "circular" }) }))] })) }))); }