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

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

"use strict";
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 types_1 = require("@selfcommunity/types");
const react_intl_1 = require("react-intl");
const constants_1 = require("./constants");
const react_1 = require("react");
const react_core_1 = require("@selfcommunity/react-core");
const types_2 = require("../../types");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const CourseTypePopover_1 = tslib_1.__importDefault(require("../../shared/CourseTypePopover"));
const classes = {
    header: `${constants_1.PREFIX}-header`,
    img: `${constants_1.PREFIX}-header-img`,
    outerWrapper: `${constants_1.PREFIX}-header-outer-wrapper`,
    innerWrapper: `${constants_1.PREFIX}-header-inner-wrapper`,
    iconWrapper: `${constants_1.PREFIX}-header-icon-wrapper`,
    buttonPopover: `${constants_1.PREFIX}-header-button-popover`,
    contrastColor: `${constants_1.PREFIX}-contrast-color`
};
function getUrlEditDashboard(course) {
    return {
        id: course.id,
        slug: course.slug,
        tab: types_2.SCCourseEditTabType.LESSONS
    };
}
function HeaderCourseDashboard(props) {
    // PROPS
    const { course, hasAction = false } = props;
    // CONTEXTS
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "public" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                privacy: intl.formatMessage({
                                                    id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                    defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                                                })
                                            } }) }))] })), (0, jsx_runtime_1.jsx)(CourseTypePopover_1.default, { course: course })] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
}
exports.default = (0, react_1.memo)(HeaderCourseDashboard);