@selfcommunity/react-ui/lib/esm/components/CourseDashboard/Header.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, Icon, Stack, Typography } from '@mui/material';
import { SCCoursePrivacyType } from '@selfcommunity/types';
import { FormattedMessage, useIntl } from 'react-intl';
import { PREFIX } from './constants';
import { memo } from 'react';
import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
import { SCCourseEditTabType } from '../../types';
import classNames from 'classnames';
import CourseTypePopover from '../../shared/CourseTypePopover';
const classes = {
    header: `${PREFIX}-header`,
    img: `${PREFIX}-header-img`,
    outerWrapper: `${PREFIX}-header-outer-wrapper`,
    innerWrapper: `${PREFIX}-header-inner-wrapper`,
    iconWrapper: `${PREFIX}-header-icon-wrapper`,
    buttonPopover: `${PREFIX}-header-button-popover`,
    contrastColor: `${PREFIX}-contrast-color`
};
function getUrlEditDashboard(course) {
    return {
        id: course.id,
        slug: course.slug,
        tab: SCCourseEditTabType.LESSONS
    };
}
function HeaderCourseDashboard(props) {
    // PROPS
    const { course, hasAction = false } = props;
    // CONTEXTS
    const scRoutingContext = useSCRouting();
    // INTL
    const intl = useIntl();
    return (_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), _jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), _jsxs(Stack, Object.assign({ className: classes.outerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "public" })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                privacy: intl.formatMessage({
                                                    id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                    defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                                                })
                                            } }) }))] })), _jsx(CourseTypePopover, { course: course })] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
}
export default memo(HeaderCourseDashboard);