Make registerLink and poster optional for events

components/EventCard.module.css

@@ -16,6 +16,10 @@
   margin-bottom: 16px;
 }
 
+.spacer {
+  margin-top: 76px;
+}
+
 .registerButton {
   width: 100%;
 }

components/EventCard.tsx

@@ -10,8 +10,8 @@ interface EventCardProps {
   date: Date;
   online: boolean;
   location: string;
-  poster: string;
+  poster?: string;
-  registerLink: string;
+  registerLink?: string;
   children: ReactNode;
 }
 
@@ -27,11 +27,14 @@ export function EventCard({
   return (
     <article className={styles.card}>
       <aside>
-        <Image alt={name} src={poster} />
+        {poster && <Image alt={name} src={poster} />}
+        {!poster && <div className={styles.spacer}></div>}
         {/* TODO: use the <Button /> component */}
-        <button className={styles.registerButton}>
+        {registerLink && (
-          <a href={registerLink}>Register</a>
+          <button className={styles.registerButton}>
-        </button>
+            <a href={registerLink}>Register</a>
+          </button>
+        )}
       </aside>
       <section className={styles.content}>
         <h2>{name}</h2>

components/EventDescriptionCard.tsx

@@ -9,7 +9,7 @@ interface Props {
   online: boolean;
   location: string;
   date: Date;
-  poster: string;
+  poster?: string;
   registerLink?: string;
   children: ReactNode;
 }
@@ -52,7 +52,7 @@ export function EventDescriptionCard({
 
   return (
     <article className={styles.card}>
-      <Image className={styles.poster} src={poster} alt={name} />
+      {poster && <Image className={styles.poster} src={poster} alt={name} />}
 
       <div className={styles.details}>
         <h3 className={styles.name}>{name}</h3>

components/playground.tsx

@@ -24,8 +24,8 @@ import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
 
 const events = [
-  { Content: AfterHoursContent, metadata: afterHoursMetadata },
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
+  { Content: AfterHoursContent, metadata: afterHoursMetadata },
   { Content: AltTab, metadata: altTabEventMetadata },
 ];
 

content/playground/after-hours.event.mdx

@@ -4,7 +4,6 @@ export const metadata = {
   date: new Date("2021-03-02 2:00 PM"),
   online: false,
   location: "MC",
-  poster: "/images/playground/intro-ootb.jpg",
   registerLink: "http://csclub.uwaterloo.ca/",
 };
 

content/playground/alt-tab.event.mdx

@@ -5,7 +5,6 @@ export const metadata = {
   online: true,
   location: "Twitch",
   poster: "/images/playground/alt-tab.jpg",
-  registerLink: "http://google.com/",
 };
 
 CSC is proud to present to you Alt-Tab! Join us in a lightning tech talk series presented to you by our very own students. Alt-Tab consists of 10 to 15-minute talks about anything related to tech. Learn more about exciting topics that range from competitive programming to cryptography!

next-env.d.ts

@@ -10,8 +10,8 @@ declare module "*.event.mdx" {
     date: Date;
     online: boolean;
     location: string;
-    poster: string;
+    poster?: string;
-    registerLink: string;
+    registerLink?: string;
   }
 
   const ReactComponent: ComponentType;