Consistent event cards

components/EventDescriptionCard.module.css

@@ -15,6 +15,7 @@
 
 .details {
   position: relative;
+  width: 100%;
 }
 
 .name {
@@ -28,6 +29,7 @@
 .desc {
   color: var(--purple-2);
   font-size: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .spacer {

components/EventDescriptionCard.tsx

@@ -4,26 +4,30 @@ import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
 
-interface BaseProps {
+interface Props {
   name: string;
+  online: boolean;
+  location: string;
   date: Date;
   poster: string;
   registerLink?: string;
   children: ReactNode;
 }
 
-type Props = BaseProps &
-  (
-    | { online: true; location: keyof typeof links }
-    | { online: false; location: string }
-  );
-
-const links = {
-  Twitch: "https://www.twitch.tv/uwcsclub",
-  Discord: "https://discord.gg/pHfYBCg",
-  Facebook: "https://www.facebook.com/uw.computerscienceclub",
-  Instagram: "https://www.instagram.com/uwcsclub/",
-};
+function getPlatformURL(platform: string) {
+  switch (platform) {
+    case "Twitch":
+      return "https://www.twitch.tv/uwcsclub";
+    case "Discord":
+      return "https://discord.gg/pHfYBCg";
+    case "Facebook":
+      return "https://www.facebook.com/uw.computerscienceclub";
+    case "Instagram":
+      return "https://www.instagram.com/uwcsclub/";
+    default:
+      return;
+  }
+}
 
 /**
  * @remarks
@@ -35,37 +39,43 @@ const links = {
  * @todo
  * get Link component
  */
-export function EventDescriptionCard(props: Props) {
+export function EventDescriptionCard({
+  location,
+  poster,
+  name,
+  date,
+  online,
+  registerLink,
+  children,
+}: Props) {
+  const platformURL = getPlatformURL(location);
+
   return (
     <article className={styles.card}>
-      <Image className={styles.poster} src={props.poster} alt={props.name} />
+      <Image className={styles.poster} src={poster} alt={name} />
 
       <div className={styles.details}>
-        <h3 className={styles.name}>{props.name}</h3>
+        <h3 className={styles.name}>{name}</h3>
         <h4 className={styles.setting}>
-          <EventSetting
-            date={props.date}
-            online={props.online}
-            location={props.location}
-          />
+          <EventSetting date={date} online={online} location={location} />
         </h4>
-        <div className={styles.desc}>{props.children}</div>
+        <div className={styles.desc}>{children}</div>
         <div className={styles.spacer}></div>
 
         <footer>
-          {props.registerLink && (
+          {registerLink && (
             <div className={styles.button}>
               <button>
-                <a href={props.registerLink}>Register</a>
+                <a href={registerLink}>Register</a>
               </button>
             </div>
           )}
-          {props.online && (
-            <a target="_blank" href={links[props.location]} rel="noreferrer">
+          {online && platformURL && (
+            <a target="_blank" href={platformURL} rel="noreferrer">
               <Image
                 className={styles.logo}
-                alt={props.location}
-                src={"logos/" + props.location + ".png"}
+                alt={location}
+                src={"logos/" + location + ".png"}
               />
             </a>
           )}

components/MiniEventCard.tsx

@@ -1,13 +1,14 @@
 import React, { ReactNode } from "react";
+import { EventSetting } from "./EventSetting";
 import styles from "./MiniEventCard.module.css";
 
 interface Props {
   name: string;
-  descriptionShort: string;
   description: ReactNode;
+  short: string;
+  online: boolean;
   location: string;
-  date: string;
-  time: string;
+  date: Date;
 }
 
 const dropDownIcon = (
@@ -28,11 +29,11 @@ const dropDownIcon = (
 
 export const MiniEventCard: React.FC<Props> = ({
   name,
-  descriptionShort,
+  short,
   description,
   location,
   date,
-  time,
+  online,
 }) => {
   return (
     <details className={styles.miniEventCard}>
@@ -43,9 +44,9 @@ export const MiniEventCard: React.FC<Props> = ({
             <div className={styles.nameSpacer}></div>
           </h2>
           <p className={styles.info}>
-            {location} | {date} | {time}
+            <EventSetting date={date} location={location} online={online} />
           </p>
-          <p className={styles.shortDescription}>{descriptionShort}</p>
+          <p className={styles.shortDescription}>{short}</p>
         </div>
 
         <p className={styles.details}>View details {dropDownIcon}</p>

components/playground.tsx

@@ -23,45 +23,22 @@ import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
 
-export function MiniEventCardDemo() {
-  const { name, location, short, date } = afterHoursMetadata;
-
-  const dateString = date.toLocaleDateString("en-US", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
-  const timeString = date.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "numeric",
-  });
+const events = [
+  { Content: AfterHoursContent, metadata: afterHoursMetadata },
+  { Content: OOTBReact, metadata: OOTBReactEventMetadata },
+  { Content: AltTab, metadata: altTabEventMetadata },
+];
 
+export function MiniEventCardDemo() {
   return (
     <div className={styles.miniEventCardDemo}>
-      <MiniEventCard
-        name={name}
-        date={dateString}
-        time={timeString}
-        descriptionShort={short}
-        location={location}
-        description={<AfterHoursContent />}
-      />
-      <MiniEventCard
-        name={name}
-        date={dateString}
-        time={timeString}
-        descriptionShort={short}
-        location={location}
-        description={<AfterHoursContent />}
-      />
-      <MiniEventCard
-        name={name}
-        date={dateString}
-        time={timeString}
-        descriptionShort={short}
-        location={location}
-        description={<AfterHoursContent />}
-      />
+      {events.map(({ Content, metadata }) => (
+        <MiniEventCard
+          {...metadata}
+          description={<Content />}
+          key={metadata.name + metadata.date.toString()}
+        />
+      ))}
     </div>
   );
 }
@@ -84,54 +61,28 @@ export function NewsCardDemo() {
 }
 
 export function EventDescriptionCardDemo() {
-  const { name, short, date } = afterHoursMetadata;
-
   return (
     <div className={styles.eventDescriptionCardDemo}>
-      <EventDescriptionCard
-        name={name}
-        date={date}
-        online={true}
-        location="Twitch"
-        poster="/images/playground/intro-ootb.jpg"
-        registerLink="/"
-      >
-        <p>{short}</p>
-      </EventDescriptionCard>
-      <EventDescriptionCard
-        name={name}
-        date={date}
-        online={true}
-        location="Twitch"
-        poster="/images/playground/alt-tab.jpg"
-        registerLink="/"
-      >
-        <p>{short}</p>
-      </EventDescriptionCard>
-      <EventDescriptionCard
-        name={name}
-        date={date}
-        online={true}
-        location="Twitch"
-        poster="/images/playground/intro-ootb.jpg"
-        registerLink="/"
-      >
-        <p>{short}</p>
-      </EventDescriptionCard>
+      {events.map(({ metadata }) => (
+        <EventDescriptionCard
+          {...metadata}
+          key={metadata.name + metadata.date.toString()}
+        >
+          {metadata.short}
+        </EventDescriptionCard>
+      ))}
     </div>
   );
 }
 
 export function EventCardDemo() {
-  const eventCardData = [
-    { Content: OOTBReact, metadata: OOTBReactEventMetadata },
-    { Content: AltTab, metadata: altTabEventMetadata },
-  ];
-
   return (
     <>
-      {eventCardData.map(({ Content, metadata }) => (
-        <EventCard {...metadata} key={metadata.date.toDateString()}>
+      {events.map(({ Content, metadata }) => (
+        <EventCard
+          {...metadata}
+          key={metadata.name + metadata.date.toDateString()}
+        >
           <Content />
         </EventCard>
       ))}