generates calendar cards from array

frontend/src/components/atoms/CalendarCard/index.tsx

+import React from "react";
+import Card from "react-bootstrap/Card";
+import styles from "./style.module.scss";
+import classNames from "classnames";
+
+export interface CalendarCardProps {
+  type: eventTypes;
+  title: string;
+  subtitle: string;
+  content: string;
+}
+
+export enum eventTypes {
+  Lecture = "Lecture",
+  Labs = "Labs",
+  Deadline = "Deadline",
+}
+
+const CalendarCard: React.FC<CalendarCardProps> = ({
+  type,
+  title,
+  subtitle,
+  content,
+}: CalendarCardProps) => {
+  return (
+    <Card className={classNames(styles.calendarCard, getStyle(type))}>
+      <Card.Body>
+        <Card.Title>
+          {type}: {title}
+        </Card.Title>
+        <Card.Subtitle>{subtitle}</Card.Subtitle>
+        <Card.Text>{content}</Card.Text>
+      </Card.Body>
+    </Card>
+  );
+};
+
+function getStyle(type: eventTypes): String {
+  switch (type) {
+    case eventTypes.Lecture:
+      return styles.calendarLecture;
+    case eventTypes.Labs:
+      return styles.calendarLabs;
+    case eventTypes.Deadline:
+      return styles.calendarDeadline;
+    default:
+      return styles.calendarLecture;
+  }
+}
+
+export default CalendarCard;

frontend/src/components/atoms/CalendarCard/style.module.scss

+@import "assets/scss/custom";
+
+$lecture-background: transparentize($blue-100, 0.5);
+$labs-background: transparentize($pink-100, 0.5);
+$deadline-background: transparentize($teal-100, 0.5);
+
+.calendarCard {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  color: #000;
+  border-width: 0px;
+  width: 100%;
+  border-radius: 5px !important;
+  text-align: left;
+}
+
+.calendarLabs * {
+  color: $pink-700;
+}
+
+.calendarLabs {
+  background: $labs-background; 
+}
+
+.calendarLecture * {
+  color: $blue-700;
+}
+
+.calendarLecture {
+  background: $lecture-background;
+}
+
+.calendarDeadline * {
+  color: $teal-700;
+}
+
+.calendarDeadline {
+  background: $deadline-background;
+}
+
+.calendarCard :global(.card-body) {
+  padding: 8px !important;
+}
+
+.calendarCard :global(.card-title) {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.calendarCard :global(.card-subtitle) {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.calendarCard :global(.card-text) {
+  font-size: 16px;
+}
+
+.calendarCard:global(.active),
+.claendarCard:active {
+  color: #fff;
+  background-color: #000 !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0px;
+}
\ No newline at end of file

frontend/src/components/molecules/CalendarGroup/index.tsx

 import React from "react";
 import styles from "./style.module.scss";
-import Card from "react-bootstrap/Card";
 import classNames from "classnames";
+import CalendarCard, { eventTypes, CalendarCardProps } from "components/atoms/CalendarCard";
 
 const CalendarGroup: React.FC = () => {
+  let events: CalendarCardProps[] = [
+    {
+      type: eventTypes.Lecture,
+      title: "CO145",
+      subtitle: "13:00 - 14:00",
+      content: "311, Huxley Building, South Kensington Campus",
+    },
+    {
+      type: eventTypes.Labs,
+      title: "CO161",
+      subtitle: "15:00 - 17:00",
+      content: "219, Huxley Building, South Kensington Campus",
+    },
+    {
+      type: eventTypes.Deadline,
+      title: "CO120.1",
+      subtitle: "19:00",
+      content: "Haskell L Systems",
+    },
+  ];
+
   return (
     <>
       <h1 className={styles.calendarCardGroupHeading}>Today</h1>
@@ -11,40 +32,15 @@ const CalendarGroup: React.FC = () => {
         className={classNames("btn-group-vertical", styles.calendarCardGroup)}
         role="group"
       >
-        <Card
-          className={classNames(styles.calendarCard, styles.calendarLecture)}
-        >
-          <Card.Body>
-            <Card.Title>Lecture: CO142</Card.Title>
-            <Card.Subtitle>09:00 - 11:00</Card.Subtitle>
-            <Card.Text>308, Huxley Building, South Kensington Campus</Card.Text>
-          </Card.Body>
-        </Card>
-        <Card
-          className={classNames(styles.calendarCard, styles.calendarLecture)}
-        >
-          <Card.Body>
-            <Card.Title>Lecture: CO145</Card.Title>
-            <Card.Subtitle>13:00 - 14:00</Card.Subtitle>
-            <Card.Text>311, Huxley Building, South Kensington Campus</Card.Text>
-          </Card.Body>
-        </Card>
-        <Card className={classNames(styles.calendarCard, styles.calendarLabs)}>
-          <Card.Body>
-            <Card.Title>Labs: CO161</Card.Title>
-            <Card.Subtitle>15:00 - 17:00</Card.Subtitle>
-            <Card.Text>219, Huxley Building, South Kensington Campus</Card.Text>
-          </Card.Body>
-        </Card>
-        <Card
-          className={classNames(styles.calendarCard, styles.calendarDeadline)}
-        >
-          <Card.Body>
-            <Card.Title>Deadline: CO120.1</Card.Title>
-            <Card.Subtitle>19:00</Card.Subtitle>
-            <Card.Text>Haskell L Systems</Card.Text>
-          </Card.Body>
-        </Card>
+        {events.map(({ type, title, subtitle, content }) => (
+          <CalendarCard
+            title={title}
+            type={type}
+            subtitle={subtitle}
+						content={content}
+						key={title + type + subtitle}
+          />
+        ))}
       </div>
     </>
   );

frontend/src/components/molecules/CalendarGroup/style.module.scss

 @import "assets/scss/custom";
 
-$lecture-background: transparentize($blue-100, 0.5);
-$labs-background: transparentize($pink-100, 0.5);
-$deadline-background: transparentize($teal-100, 0.5);
-
-.calendarCard {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  color: #000;
-  border-width: 0px;
-  width: 100%;
-  border-radius: 5px !important;
-  text-align: left;
-}
-
-.calendarLabs * {
-  color: $pink-700;
-}
-
-.calendarLabs {
-  background: $labs-background; 
-}
-
-.calendarLecture * {
-  color: $blue-700;
-}
-
-.calendarLecture {
-  background: $lecture-background;
-}
-
-.calendarDeadline * {
-  color: $teal-700;
-}
-
-.calendarDeadline {
-  background: $deadline-background;
-}
-
-.calendarCard :global(.card-body) {
-  padding: 8px !important;
-}
-
-.calendarCard :global(.card-title) {
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.calendarCard :global(.card-subtitle) {
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.calendarCard :global(.card-text) {
-  font-size: 16px;
-}
-
-.calendarCard:global(.active),
-.claendarCard:active {
-  color: #fff;
-  background-color: #000 !important;
-  font-weight: 500;
-  text-align: left;
-  border-width: 0px;
-}
-
 
 @media (max-width: 992px) {
   .calendarCardGroup {