From 180ea16200d0f5ea9f74145de2b5de1b85be4654 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Wed, 26 Aug 2020 15:53:03 +0100
Subject: [PATCH] Add accordian to overview
---
src/components/pages/ModuleOverview/index.tsx | 28 +++++++++++++++++++
.../pages/ModuleOverview/style.module.scss | 1 +
2 files changed, 29 insertions(+)
diff --git a/src/components/pages/ModuleOverview/index.tsx b/src/components/pages/ModuleOverview/index.tsx
index 7783bcea7..b6fae975d 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 0df877f84..e2ec141f9 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) {
}
--
GitLab