show only upcoming events

- eventsPage.tsx: handle no upcoming events, show only future events
- Events.module.scss: add styling for message displayed on eventsPage

pages/eventsPage.tsx

@@ -47,21 +47,18 @@ export default function Events({ events }: Props): JSX.Element {
     );
   });
 
-  if (committee === 'board') {
-    filteredEvents.shift();
-  }
-
   return (
     <MainLayout>
       <div className={styles.main}>
         <h1 className={styles.title}>Events</h1>
-        {/* <p className={styles.description}>
-          Event descriptions Event descriptionsEvent descriptionsEvent
-          descriptionsEvent descriptionsEvent descriptions Event
-          descriptionsEvent descriptionsEvent descriptions
-        </p> */}
         <div>
           <h2 className={styles.subtitle}>Upcoming Events</h2>
+          {/* if there are no events, display a message */}
+          {filteredEvents.length === 0 && (
+            <div>
+              <h4 className={styles.message}>Stay tuned for more events!</h4>
+            </div>
+          )}
           {filteredEvents.map((event, index) => {
             const start = format(new Date(event.start), 'h:mma');
             const end = format(new Date(event.end), 'h:mma');

styles/Events.module.scss

@@ -38,6 +38,14 @@
   color: vars.$committee-color;
 }
 
+.message {
+  font-weight: 400;
+  font-size: 28px;
+  margin-left: 1rem;
+  margin-top: 2rem;
+  color: #313235;
+}
+
 .card {
   min-height: 200px;
   text-align: center;