Add Live tag to events, add placeholder for empty event carousels

src/components/common/Carousel/style.module.scss

@@ -1,6 +1,7 @@
 @use 'src/styles/vars.scss' as vars;
 
 .slider {
+  align-items: stretch;
   display: flex;
   gap: 2rem;
   overflow-x: auto;

src/components/events/EventCard/index.tsx

@@ -41,6 +41,9 @@ const EventCard = ({
     : event;
   const community = toCommunity(committee);
 
+  const now = new Date();
+  const ongoing = now > new Date(event.start) && now < new Date(event.end);
+
   const [expanded, setExpanded] = useState(false);
   const hasModal = !isOrderPickupEvent(event) || event.linkedEvent;
 
@@ -104,6 +107,9 @@ const EventCard = ({
               </Typography>
             </div>
             <div className={styles.badges}>
+              {!isOrderPickupEvent(event) && ongoing ? (
+                <div className={`${styles.badge} ${styles.badgeLive}`}>• Live</div>
+              ) : null}
               {committee ? (
                 <div className={`${styles.badge} ${styles[`badge${community}`]}`}>
                   {communityNames[community]}

src/components/events/EventCard/style.module.scss

@@ -3,6 +3,8 @@
 .container {
   background: var(--theme-background);
   border-radius: 10px;
+  display: flex;
+  flex-direction: column;
   height: fit-content;
   -ms-overflow-style: none;
   overflow-x: hidden;
@@ -40,6 +42,7 @@
     gap: 6px;
     padding: 1rem 1.5rem;
     white-space: nowrap;
+    width: 100%;
 
     .infoText {
       display: flex;
@@ -60,6 +63,12 @@
         font-weight: 500;
         padding: 2px 5px;
 
+        &.badgeLive {
+          background-color: vars.$danger-1;
+          border-color: vars.$danger-1;
+          color: #fff;
+        }
+
         &.badgeGeneral {
           background-color: vars.$blue-3;
           border-color: vars.$blue-5;

src/components/events/EventCard/style.module.scss.d.ts

@@ -6,6 +6,7 @@ export type Styles = {
   badgeDesign: string;
   badgeGeneral: string;
   badgeHack: string;
+  badgeLive: string;
   badgePoints: string;
   badges: string;
   bordered: string;

src/components/events/EventCarousel/index.tsx

@@ -1,6 +1,7 @@
 import { Carousel, Typography } from '@/components/common';
 import { config } from '@/lib';
 import { PublicAttendance, PublicEvent } from '@/lib/types/apiResponses';
+import DiamondFriends from '@/public/assets/graphics/portal/diamond-friends.svg';
 import Link from 'next/link';
 import EventCard from '../EventCard';
 import styles from './style.module.scss';
@@ -9,9 +10,10 @@ interface EventCarouselProps {
   title: string;
   events: PublicEvent[];
   attendances: PublicAttendance[];
+  placeholder: string;
 }
 
-const EventCarousel = ({ title, events, attendances }: EventCarouselProps) => {
+const EventCarousel = ({ title, events, attendances, placeholder }: EventCarouselProps) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>
@@ -22,16 +24,23 @@ const EventCarousel = ({ title, events, attendances }: EventCarouselProps) => {
           See all events &gt;
         </Link>
       </div>
-      <Carousel>
-        {events.map(event => (
-          <EventCard
-            className={styles.card}
-            key={event.uuid}
-            event={event}
-            attended={attendances.some(a => a.event.uuid === event.uuid)}
-          />
-        ))}
-      </Carousel>
+      {events.length > 0 ? (
+        <Carousel>
+          {events.map(event => (
+            <EventCard
+              className={styles.card}
+              key={event.uuid}
+              event={event}
+              attended={attendances.some(a => a.event.uuid === event.uuid)}
+            />
+          ))}
+        </Carousel>
+      ) : (
+        <div className={styles.noEvents}>
+          <DiamondFriends />
+          <Typography variant="h4/regular">{placeholder}</Typography>
+        </div>
+      )}
     </div>
   );
 };

src/components/events/EventCarousel/style.module.scss

@@ -30,6 +30,10 @@
       font: inherit;
       padding: 0;
 
+      @media screen and (width <= vars.$breakpoint-md) {
+        display: none;
+      }
+
       &:hover {
         text-decoration: underline;
       }
@@ -38,6 +42,25 @@
 
   .card {
     flex: none;
-    width: 20rem;
+    height: auto;
+    // (2 rem (content) + 1.5rem (carousel)) * 2 (on both sides) + 2 rem (gap) = 9 rem
+    // We then add 1 more rem so we can see the start of the next card.
+    width: min(100vw - 10rem, 20rem);
+  }
+
+  .noEvents {
+    align-items: center;
+    background-color: var(--theme-background);
+    border: 1px solid var(--theme-elevated-stroke);
+    border-radius: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 1rem;
+    justify-content: center;
+    margin: 1rem 0;
+    overflow: hidden;
+    padding: 2rem 1rem;
+    text-align: center;
   }
 }

src/components/events/EventCarousel/style.module.scss.d.ts

@@ -2,6 +2,7 @@ export type Styles = {
   card: string;
   header: string;
   headerText: string;
+  noEvents: string;
   viewToggle: string;
   wrapper: string;
 };

src/pages/index.tsx

@@ -89,18 +89,20 @@ const PortalHomePage = ({
         <div className={styles.desktop}>
           <HomeActions user={user} points={points} checkin={checkin} />
         </div>
-        {upcomingEvents.length > 0 ? (
-          <EventCarousel title="Upcoming Events" events={upcomingEvents} attendances={attendance} />
-        ) : null}
-      </div>
-
-      {attendedEvents.length > 0 ? (
         <EventCarousel
-          title="Recently Attended Events"
-          events={attendedEvents}
+          title="Upcoming Events"
+          events={upcomingEvents}
           attendances={attendance}
+          placeholder="Check back soon for upcoming events!"
         />
-      ) : null}
+      </div>
+
+      <EventCarousel
+        title="Recently Attended Events"
+        events={attendedEvents}
+        attendances={attendance}
+        placeholder="Attend your first event and earn membership points!"
+      />
     </div>
   );
 };