@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
59 lines (52 loc) • 3.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const constants_1 = require("./constants");
const react_core_1 = require("@selfcommunity/react-core");
const CreateCourseButton_1 = tslib_1.__importDefault(require("../CreateCourseButton"));
const classes = {
root: `${constants_1.PREFIX}-create-placeholder-root`,
imageWrapper: `${constants_1.PREFIX}-create-placeholder-image-wrapper`,
image: `${constants_1.PREFIX}-create-placeholder-image`,
icon: `${constants_1.PREFIX}-create-placeholder-icon`,
actions: `${constants_1.PREFIX}-create-placeholder-actions`
};
const Root = (0, material_1.styled)(Widget_1.default, {
name: constants_1.PREFIX,
slot: 'CreatePlaceholderRoot'
})(() => ({}));
/**
* > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
#### Import
```jsx
import {CourseCreatePlaceholder} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCCourse-placeholder-root` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCCourse-create-placeholder-root|Styles applied to the root element.|
|imageWrapper|.SCCourse-create-placeholder-image|Styles applied to the image wrapper section.|
|image|.SCCourse-create-placeholder-image|Styles applied to the image element.|
|icon|.SCCourse-create-placeholder-icon|Styles applied to the course icon element.|
|actions|.SCCourse-create-placeholder-actions|Styles applied to action section.|
*
*/
function CourseCreatePlaceholder(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { CreateCourseButtonComponentProps = {}, className } = props, rest = tslib_1.__rest(props, ["CreateCourseButtonComponentProps", "className"]);
// HOOK
const { preferences } = (0, react_core_1.useSCPreferences)();
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: `${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(CreateCourseButton_1.default, Object.assign({}, CreateCourseButtonComponentProps)) }))] })));
}
exports.default = CourseCreatePlaceholder;