diff --git a/src/components/pages/ModuleOverview/index.tsx b/src/components/pages/ModuleOverview/index.tsx index 7783bcea75daaed9904d1ce1d0c831f6de32d995..b6fae975dff887f56e6e1a40a2f098fe09b819eb 100644 --- a/src/components/pages/ModuleOverview/index.tsx +++ b/src/components/pages/ModuleOverview/index.tsx @@ -7,6 +7,9 @@ import { faGlobe, faLink } from "@fortawesome/free-solid-svg-icons"; import PageButtonGroup from "components/molecules/PageButtonGroup"; import { request } from "../../../utils/api"; import { api, methods } from "../../../constants/routes"; +import ProgressBar from "react-bootstrap/ProgressBar"; +import Accordion from "react-bootstrap/Accordion"; +import Card from "react-bootstrap/Card"; const ModuleOverview: React.FC = () => { let { id } = useParams(); @@ -69,6 +72,31 @@ const ModuleOverview: React.FC = () => { <h4 className={classNames(styles.moduleSectionHeader)}>Links</h4> <PageButtonGroup buttons={buttons} style={{ marginTop: "1.25rem" }} /> + + <h4 className={classNames(styles.moduleSectionHeader)}>Progress</h4> + {/* <ProgressBar + now={60} + className={styles.progress} + /> */} + <Accordion defaultActiveKey="0" style={{ marginTop: "30px", borderRadius: ".5rem"}}> + <Card> + <Accordion.Toggle as={Card.Header} eventKey="0"> + Week 1 + </Accordion.Toggle> + <Accordion.Collapse eventKey="0"> + <Card.Body>Hello! I'm the body</Card.Body> + </Accordion.Collapse> + </Card> + <Card> + <Accordion.Toggle as={Card.Header} eventKey="1"> + Week 2 + </Accordion.Toggle> + <Accordion.Collapse eventKey="1"> + <Card.Body>Hello! I'm another body</Card.Body> + </Accordion.Collapse> + </Card> + </Accordion> + </> ); }; diff --git a/src/components/pages/ModuleOverview/style.module.scss b/src/components/pages/ModuleOverview/style.module.scss index 0df877f84d5726f81c8c538576acb7aa5510b5f3..e2ec141f9d5a9a2f6faa0496ce696997bc92d185 100644 --- a/src/components/pages/ModuleOverview/style.module.scss +++ b/src/components/pages/ModuleOverview/style.module.scss @@ -8,6 +8,7 @@ margin-top: 1rem; } + @media (max-width: 62rem) { }