added times to events and fixed next event bug

src/app/_blocks/NextEvent/index.tsx

@@ -144,7 +144,7 @@ export const NextEventBlock: React.FC<
         {
           depth: 1,
           limit: 1,
-          sort: 'date',
+          sort: '-date',
         },
         { encode: false },
       )

src/app/_components/CollectionArchive/index.tsx

@@ -314,6 +314,7 @@ export const CollectionArchive: React.FC<Props> = props => {
           date={isPopUpVisible.date}
           description={isPopUpVisible.description}
           location={isPopUpVisible.location}
+          endTime={isPopUpVisible.endTime}
           onEventClick={EventClick}
         />
       )}

src/app/_components/EventPopUp/index.module.scss

@@ -78,6 +78,7 @@
     display: flex;
     flex-direction: column;
     padding-left: 20px;
+    flex: 70%;
 }
 
 .name {
@@ -107,8 +108,7 @@
 }
 
 .bio {
-    flex: 70%;
-    padding-top: 30px;
+    // flex: 70%;
     padding-left: 5%;
     padding-right: 5%;
     font-size: 20px;
@@ -120,13 +120,10 @@
     text-align: center;
     padding-left: 10%;
     padding-right: 10%;
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
     justify-content: center;
 
-    @include extra-small-break {
-        width: 100%;
-      }
   }
 
   .date {
@@ -136,9 +133,9 @@
     letter-spacing: 0;
     line-height: normal;
 
-    // @include extra-small-break {
-    //     font-size: 18vw;
-    //   }
+    @include extra-small-break {
+        font-size: 10vw;
+      }
   }
 
   .month {
@@ -149,9 +146,27 @@
     line-height: normal;
     width: 100%;
 
-    // @include extra-small-break {
-    //     font-size: 7vw;
-    //   }
+    @include extra-small-break {
+        font-size: 6vw;
+      }
+  }
+
+  .time {
+    color: var(--theme-elevation-400);
+    font-size: 20px;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: normal;
+    width: 100%;
+    white-space: nowrap;
+
+    @include small-break {
+        white-space: wrap;
+    }
+
+    @include extra-small-break {
+        font-size: 4vw;
+    }
   }
 
 

src/app/_components/EventPopUp/index.tsx

@@ -20,6 +20,7 @@ interface PopUpProps {
   date: string
   location: string | null
   description: string | null
+  endTime: string | null
   onEventClick: (event: Event | null) => void
 }
 
@@ -28,6 +29,7 @@ export const EventPopUp: React.FC<PopUpProps> = ({
   date,
   location,
   description,
+  endTime,
   onEventClick,
 }) => {
   const closeClick = () => {
@@ -57,7 +59,12 @@ export const EventPopUp: React.FC<PopUpProps> = ({
   const month = parseInt(dateParts[1], 10)
   const day = dateParts[2].split('T')[0]
   const monthName = getMonthName(month)
-
+  const time = dateParts[2].split('T')[1].split(':').slice(0, 2).join(':')
+  let concEndTime: string | null = null
+  if (endTime) {
+    const endTimeParts = endTime.split('-')
+    concEndTime = endTimeParts[2].split('T')[1].split(':').slice(0, 2).join(':')
+  }
   return (
     <>
       <div className={[classes.background, inter.className].join(' ')} onClick={closeClick} />
@@ -67,6 +74,11 @@ export const EventPopUp: React.FC<PopUpProps> = ({
           <div className={classes.when}>
             <div className={classes.date}>{day}</div>
             <div className={classes.month}>{monthName}</div>
+            {endTime ? (
+              <span className={classes.time}>{time + ' - ' + concEndTime}</span>
+            ) : (
+              <span className={classes.time}>{time}</span>
+            )}
           </div>
           <div className={classes.bits}>
             <span className={classes.name}>{name}</span>

src/payload/collections/Events.ts

@@ -39,6 +39,16 @@ const Events: CollectionConfig = {
         },
       },
     },
+    {
+      name: 'endTime',
+      label: 'End Time',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'timeOnly',
+        },
+      },
+    },
     {
       name: 'location',
       label: 'Location',

src/payload/payload-types.ts

@@ -935,6 +935,7 @@ export interface Event {
   id: string;
   name: string;
   date: string;
+  endTime?: string | null;
   location?: string | null;
   description?: string | null;
   updatedAt: string;