Calendar slots

client/src/App.js

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { Home, Board, Sponsors, Resources, Test, ResumeBook } from "./pages";
 import { Footer, Navigation } from "./molecules";
 import ProgressBar from "react-scroll-progress-bar";
-import Calendar from "./atoms/CalendarSlots/Calendar";
+import Calendar from "./molecules/Calendar/Calendar";
 function App() {
   return (
     <div className="App">

client/src/atoms/CalendarSlots/Calendar.css

@@ -1,20 +1,7 @@
-.slot_container{
-    width: 450px;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    align-items: center;
-    justify-content: center;
-}
 
 .slot{
+    width: 450px;
     display: flex;
     gap: 40px;
+    padding-left: 10%;
 }
-
-.line{
-    display: block;
-    width: 100%;
-    height: 1px;
-    background-color: black;
-}

client/src/atoms/CalendarSlots/Calendar.jsx

@@ -5,12 +5,9 @@ const Calendar = ({ date, event }) => {
     let dummyDate = "3/20/2024";
     let dummyEvent = "Research Night @ Gates G01";
     return (
-        <div className='slot_container'>
-            <div className = "slot">
-                <div className="date">{date? date: dummyDate}</div>
-                <div className="event">{event? event: dummyEvent}</div>
-            </div>
-            <span className='line'></span>
+        <div className="slot">
+            <div className="date">{date ? date : dummyDate}</div>
+            <div className="event">{event ? event : dummyEvent}</div>
         </div>
     )
 }

client/src/molecules/Calendar/Calendar.css

@@ -0,0 +1,24 @@
+.calendar_container{
+    width: 450px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    align-items: center;
+    justify-content: center;
+}
+
+.line{
+    display: block;
+    width: 100%;
+    height: 1.2px;
+    background-color: grey;
+}
+
+.title{
+    padding-bottom: 32px;
+    width: 65%;
+}
+
+.title h2{
+    padding-bottom: 0;
+}

client/src/molecules/Calendar/Calendar.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import CalendarAtom from '../../atoms/CalendarSlots/Calendar'
+import './Calendar.css'
+
+const Calendar = () => {
+
+    const line = <span className='line'></span>
+    return (
+        <div className='calendar_container'>
+            <div className='title'>
+                <h2>Upcoming Events</h2>
+                {line}
+            </div>
+            <CalendarAtom date = "03/20/2024" event = "Research Night @ Gates G01"/>
+            {line}
+            <CalendarAtom date = "03/23/2024" event = "Game Night @ Upson 221"/>
+        </div>
+    )
+}
+
+export default Calendar