@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
93 lines (84 loc) • 3.78 kB
TypeScript
import { SCCourseType } from '@selfcommunity/types';
import React from 'react';
import { SCCourseTemplateType } from '../../types/course';
import { CourseParticipantsButtonProps } from '../CourseParticipantsButton';
import { WidgetProps } from '../Widget';
import { CourseSkeletonProps } from './Skeleton';
export interface CourseProps extends WidgetProps {
/**
* Course Object
* @default null
*/
course?: SCCourseType;
/**
* Id of the course for filter the feed
* @default null
*/
courseId?: number;
/**
* Course template type
* @default 'preview'
*/
template?: SCCourseTemplateType;
/**
* It shows a different snippet type
*/
userProfileSnippet?: boolean;
/**
* Actions
* @default null
*/
actions?: React.ReactNode;
/**
* Props to spread to CourseParticipantsButton component
* @default {}
*/
CourseParticipantsButtonComponentProps?: CourseParticipantsButtonProps;
/**
* Props to spread to CourseSkeleton component
* @default {}
*/
CourseSkeletonComponentProps?: CourseSkeletonProps;
/**
* Any other properties
*/
[p: string]: any;
}
/**
* > API documentation for the Community-JS Course component. Learn about the available props and the CSS API.
*
*
* This component renders a course item.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Course)
#### Import
```jsx
import {course} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCCourse` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCCourses-root|Styles applied to the root element.|
|chip|.SCCourses-chip|Styles applied to the chip element.|
|previewRoot|.SCCourses-preview-root|Styles applied to the root element in the preview template.|
|previewActions|.SCCourses-preview-actions|Styles applied to the actions section in the preview template.|
|previewAvatar|.SCCourses-preview-avatar|Styles applied to the avatar in the preview template.|
|previewCategory|.SCCourses-preview-category|Styles applied to the category element in the preview template.|
|previewCompletedStatus|.SCCourses-preview-completed-status|Styles applied to indicate the completed status in the preview template.|
|previewContent|.SCCourses-preview-content|Styles applied to the content section in the preview template.|
|previewCreator|.SCCourses-preview-creator|Styles applied to the creator element in the preview template.|
|previewImage|.SCCourses-preview-image|Styles applied to the image in the preview template.|
|previewImageWrapper|.SCCourses-preview-image-wrapper|Styles applied to the wrapper of the image in the preview template.|
|previewInfo|.SCCourses-preview-info|Styles applied to the info section in the preview template.|
|previewName|.SCCourses-preview-name|Styles applied to the name element in the preview template.|
|previewNameWrapper|.SCCourses-preview-name-wrapper|Styles applied to the name wrapper in the preview template.|
|previewProgress|.SCCourses-preview-progress|Styles applied to indicate the progress section in the preview template.|
|previewProgressBar|.SCCourses-preview-progress-bar|Styles applied to the progress bar in the preview template.|
|snippetRoot|.SCCourses-snippet-root|Styles applied to the root element in the snippet template.|
|snippetAvatar|.SCCourses-snippet-avatar|Styles applied to the avatar element in the snippet template.|
|snippetImage|.SCCourses-snippet-image|Styles applied to the image element in the snippet template.|
*
* @param inProps
*/
export default function Course(inProps: CourseProps): JSX.Element;