Create and add styling for week heading card

src/components/pages/Timeline/components/WeekHeading/index.tsx

 import React from "react";
+import Card from "react-bootstrap/Card";
+import styles from "./style.module.scss";
+
 const WeekHeading: React.FC = () => {
   return (
     <>
+      <Card className={styles.weekCard}>
+        <Card.Header>
+          <div className={styles.weekHeading}>Week 1</div>
+          <div className={styles.weekDateRange}>06/10 - 10/10</div>
+        </Card.Header>
+        <Card.Body>
+          <div className={styles.dayIndicator}>Mon</div>
+          <div className={styles.dayIndicator}>Tue</div>
+          <div className={styles.dayIndicator}>Wed</div>
+          <div className={styles.dayIndicator}>Thu</div>
+          <div className={styles.dayIndicator}>Fri</div>
+        </Card.Body>
+      </Card>
     </>
   );
 };
 
-export default WeekHeading;
\ No newline at end of file
+export default WeekHeading;

src/components/pages/Timeline/components/WeekHeading/style.module.scss

+@import "assets/scss/custom";
+
+.weekCard {
+  width: 11.25rem;
+  height: 3.75rem;
+  border-radius: 0.5rem !important;
+  border-width: 0rem;
+  background: var(--background-color);
+  box-sizing: border-box;
+}
+
+.weekCard :global(.card-header) {
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.5rem !important;
+  background: var(--primary-button);
+}
+
+.weekCard :global(.card-body) {
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: middle;
+  padding: 0.5rem 0.25rem;
+}
+
+.dayIndicator {
+  color: var(--primary-text-color);
+  font-weight: 500;
+  width: 2.25rem !important;
+  text-align: center;
+}
+
+.weekDateRange {
+  color: var(--tertiary-text-color);
+}
+
+.weekHeading {
+  font-weight: 500;
+  color: var(--primary-text-color);
+}

src/components/pages/Timeline/index.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 import styles from "./style.module.scss";
 import TermSwitcher from "./components/TermSwitcher";
+<<<<<<< Updated upstream
 import ModuleHeading from "./components/ModuleHeading";
+=======
+import WeekHeading from "./components/WeekHeading";
+>>>>>>> Stashed changes
 
 interface TimelineProps {
   initSideBar: () => void;
@@ -27,6 +31,7 @@ class Timeline extends React.Component<TimelineProps, {}> {
 					moduleCode="CO112"
 					title="Introduction to Computer Systems"
 				/>
+        <WeekHeading />
       </div>
     );
   }