Create variant for EventPreview

* Both regular and admin card

  * Regular is a thicker padding

  * Admin is a smaller padding

client/src/components/composite/Admin/AdminEventView/AdminAllEvents/AdminAllEvents.tsx

@@ -200,7 +200,8 @@ const AdminAllEvents = ({
       return EventRenderingUtils.previewTransformer(
         event,
         eventSelectionHandler,
-        "edit event"
+        "edit event",
+        "admin"
       )
     }) || []
 
@@ -209,7 +210,8 @@ const AdminAllEvents = ({
       return EventRenderingUtils.previewTransformer(
         event,
         eventSelectionHandler,
-        "edit event"
+        "edit event",
+        "admin"
       )
     }) || []
 

client/src/components/generic/Event/EventPreview/EventPreview.tsx

@@ -1,7 +1,7 @@
 // 4 props: 3 string, 1 image
 import Image from "next/image"
 import Arrow from "@/assets/icons/rightarrow.svg"
-
+export type EventCardPreviewVariant = "regular" | "admin"
 /**
  * The interface (props) associated with {@link EventsCardPreview}
  */
@@ -37,6 +37,10 @@ export interface IEventsCardPreview {
   title: string
 
   viewButtonText?: string
+  /**
+   * The variant of the card to render
+   */
+  variant?: EventCardPreviewVariant
 }
 
 type ViewButtonProps = {
@@ -71,13 +75,14 @@ const EventsCardPreview = ({
   image = "",
   signUpOpenDate,
   isPastEvent,
-  viewButtonText = "view more"
+  viewButtonText = "view more",
+  variant = "regular"
 }: IEventsCardPreview) => {
   return (
     <div
       className={`border-gray-3 navbar-shadow flex w-full flex-col items-center
           	    justify-center gap-2 rounded-md border bg-white p-4 sm:flex-row
-                sm:px-10 sm:py-12 ${isPastEvent && "brightness-50"}`}
+                sm:px-10 sm:py-${variant === "admin" ? 10 : 12} ${isPastEvent && "brightness-50"}`}
     >
       <div className="border-gray-3 h-fit max-h-[150px] w-[200px] overflow-hidden border">
         <Image

client/src/components/generic/Event/EventUtils.ts

@@ -1,7 +1,10 @@
 import { DateUtils } from "@/components/utils/DateUtils"
 import { Event } from "@/models/Events"
 import { MS_IN_SECOND } from "@/utils/Constants"
-import { IEventsCardPreview } from "./EventPreview/EventPreview"
+import {
+  EventCardPreviewVariant,
+  IEventsCardPreview
+} from "./EventPreview/EventPreview"
 
 export const IMAGE_PLACEHOLDER_SRC =
   "https://placehold.co/600x400?text=UASC+Event" as const
@@ -79,7 +82,8 @@ export const EventRenderingUtils = {
   previewTransformer: (
     event: Event,
     eventSetter: (id?: string) => void,
-    buttonText?: string
+    buttonText?: string,
+    variant?: EventCardPreviewVariant = "default"
   ): IEventsCardPreview => {
     let eventStartDate
 
@@ -116,7 +120,8 @@ export const EventRenderingUtils = {
       onClick: () => {
         eventSetter(event.id)
       },
-      viewButtonText: buttonText
+      viewButtonText: buttonText,
+      variant
     }
   }
 }