-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: integrate new pathway section in academy detail page (#1068)
- Loading branch information
1 parent
b1b9c02
commit 648b55e
Showing
8 changed files
with
291 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,67 @@ | ||
| import { Container } from '@openedx/paragon'; | ||
| import { Container, useToggle } from '@openedx/paragon'; | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import DOMPurify from 'dompurify'; | ||
| import { FormattedMessage } from '@edx/frontend-platform/i18n'; | ||
| import PathwayModal from '../pathway/PathwayModal'; | ||
|
|
||
| const PathwaysSection = () => ( | ||
| <Container className="pathway-section mb-4"> | ||
| <Container size="lg" className="inner-container pr-0"> | ||
| <div className="row"> | ||
| <div className="col"> | ||
| <p className="eyebrow">Pathway</p> | ||
| <h1 className="pathway-title">Ai for Leaders</h1> | ||
| <p className="pathway-description">Lead with AI. This pathway will introduce you to basics of AI, as well as cover core | ||
| concepts for how to use and apply AI responsibly to support the strategy and growth | ||
| of your business. | ||
| </p> | ||
| </div> | ||
| <div className="col d-flex justify-content-center align-items-center"> | ||
| <button className="launch-btn" type="button">Launch Pathway</button> | ||
| </div> | ||
| </div> | ||
| </Container> | ||
| </Container> | ||
| ); | ||
| const PathwaysSection = ({ pathwayData }) => { | ||
| const [isLearnerPathwayModalOpen, openLearnerPathwayModal, onClose] = useToggle(false); | ||
| const handleCardClick = () => { | ||
| openLearnerPathwayModal(); | ||
| }; | ||
| return ( | ||
| <> | ||
| <PathwayModal | ||
| learnerPathwayUuid={pathwayData?.pathwayUuid} | ||
| isOpen={isLearnerPathwayModalOpen} | ||
| onClose={onClose} | ||
| /> | ||
| <Container className="pathway-section mb-5"> | ||
| <Container size="lg" className="inner-container pr-0"> | ||
| <div className="row"> | ||
| <div className="col"> | ||
| <p className="eyebrow"> | ||
| <FormattedMessage | ||
| id="academy.detail.page.pathway.section.heading" | ||
| defaultMessage="Pathway" | ||
| description="Heading for the pathway section on the academy detail page" | ||
| /> | ||
| </p> | ||
| <h1 className="pathway-title">{pathwayData.title}</h1> | ||
| <div | ||
| // eslint-disable-next-line react/no-danger | ||
| dangerouslySetInnerHTML={{ | ||
| __html: DOMPurify.sanitize( | ||
| pathwayData.overview, | ||
| { USE_PROFILES: { html: true } }, | ||
| ), | ||
| }} | ||
| className="pathway-description" | ||
| /> | ||
| </div> | ||
| <div className="col d-flex justify-content-center align-items-center"> | ||
| <button className="launch-btn" type="button" onClick={handleCardClick}> | ||
| <FormattedMessage | ||
| id="academy.detail.page.pathway.section.launch.button" | ||
| defaultMessage="Launch Pathway" | ||
| description="Button to launch the pathway" | ||
| /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </Container> | ||
| </Container> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| PathwaysSection.propTypes = { | ||
| pathwayData: PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| overview: PropTypes.string, | ||
| pathwayUuid: PropTypes.string, | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| export default PathwaysSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.