Change css and props

components/EventCard.module.css

@@ -1,41 +1,43 @@
 .eventCard {
   display: flex;
   flex-direction: row;
-  width: 75%;
-}
-
-.eventCard aside {
+  max-width: 1000px;
+  box-sizing: border-box;
   padding: 24px;
 }
 
+.eventCard aside {
+  flex: 0 0 144px;
+  margin-right: 24px;
+}
+
 .eventCard aside img {
-  width: 144px;
-  height: 144px;
+  width: 100%;
   margin-bottom: 16px;
 }
 
 .eventCard aside button {
-  width: 144px;
+  width: 100%;
 }
 
-.eventCardContent {
-  color: var(--purple-1);
-}
-
-.eventCardContent h2 {
-  font-family: "Poppins", "Verdana", sans-serif;
+.eventCardContent > h2 {
   font-size: 24px;
   font-weight: 700;
   font-style: normal;
+  margin-top: 0;
   margin-bottom: 0;
 }
 
-.eventCardContent p,
-.eventCardContent h3 {
-  font-family: "Poppins", "Verdana", sans-serif;
+.eventCardContent,
+.eventCardContent > h3 {
+  color: var(--purple-1);
   font-size: 14px;
   font-weight: 400;
   font-style: normal;
   margin-top: 0;
   margin-bottom: 14px;
 }
+
+.eventCardContent {
+  margin-bottom: 0;
+}

components/EventCard.tsx

@@ -1,43 +1,44 @@
-import React, { ReactElement } from "react";
+import React, { ReactNode } from "react";
 import styles from "./EventCard.module.css";
 
 import { EventSetting } from "./EventSetting";
 // import Button from ".Button"
 
 interface EventCardProps {
-  title: string;
+  name: string;
+  short: string;
   date: Date;
   online: boolean;
   location: string;
-  imgAlt: string;
-  imgSrc: string;
-  registerSrc: string;
-  children: ReactElement;
+  poster: string;
+  registerLink: string;
+  children: ReactNode;
 }
 
 export function EventCard({
-  title,
+  name,
   date,
   online,
   location,
-  imgAlt,
-  imgSrc,
-  registerSrc,
+  poster,
+  registerLink,
   children,
 }: EventCardProps) {
   return (
     <section className={styles.eventCard}>
       <aside>
-        <img alt={imgAlt} src={imgSrc} />
+        <img alt={name} src={poster} />
         {/*<Button />*/}
         <button>
-          <a href={registerSrc}>Register</a>
+          <a href={registerLink}>Register</a>
         </button>
       </aside>
       <article className={styles.eventCardContent}>
-        <h2>{title}</h2>
-        <EventSetting date={date} online={online} location={location} />
-        {children}
+        <h2>{name}</h2>
+        <h3>
+          <EventSetting date={date} online={online} location={location} />
+        </h3>
+        <div>{children}</div>
       </article>
     </section>
   );

components/EventDescriptionCard.tsx

@@ -41,13 +41,13 @@ export function EventDescriptionCard(props: Props) {
 
       <div className={styles.details}>
         <h3 className={styles.name}>{props.name}</h3>
-        <div className={styles.setting}>
+        <h4 className={styles.setting}>
           <EventSetting
             date={props.date}
             online={props.online}
             location={props.location}
           />
-        </div>
+        </h4>
         <div className={styles.desc}>{props.children}</div>
         <div className={styles.spacer}></div>
 

components/EventSetting.module.css

@@ -1,3 +0,0 @@
-.setting {
-  margin: 0
-}

components/EventSetting.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import styles from "./EventSetting.module.css";
 
 interface Props {
   date: Date;
@@ -20,9 +19,9 @@ export function EventSetting(props: Props) {
   const location = props.online ? `Online - ${props.location}` : props.location;
 
   return (
-    <h3 className={styles.setting}>
+    <div>
       <time dateTime={props.date.toISOString()}>{`${date} | ${time}`}</time>
       {` | ${location}`}
-    </h3>
+    </div>
   );
 }

components/playground.tsx

@@ -6,20 +6,20 @@ import styles from "./playground.module.css";
 import AfterHoursContent, {
   metadata as afterHoursMetadata,
 } from "../content/playground/after-hours.event.mdx";
+import OOTBReact, {
+  metadata as OOTBReactEventMetadata,
+} from "../content/playground/ootb-react.event.mdx";
+import AltTab, {
+  metadata as altTabEventMetadata,
+} from "../content/playground/alt-tab.event.mdx";
+
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
 
 import { MiniEventCard } from "./MiniEventCard";
 import { NewsCard } from "./NewsCard";
-
 import { EventCard } from "./EventCard";
-import OOTBReact, {
-  metadata as OOTBReactEventMetadata,
-} from "../content/playground/event-card/ootb-react.event-card.mdx";
-import AltTab, {
-  metadata as altTabEventMetadata,
-} from "../content/playground/event-card/alt-tab.event-card.mdx";
 
 export function MiniEventCardDemo() {
   const { name, location, short, date } = afterHoursMetadata;

content/playground/after-hours.event.mdx

@@ -2,7 +2,10 @@ export const metadata = {
   name: "Afterhours: Personal Relationships",
   short: "Learn how React works and make your own version!",
   date: new Date("2021-03-02 2:00 PM"),
-  location: "Online - Twitch",
+  online: false,
+  location: "MC",
+  poster: "/images/playground/intro-ootb.jpg",
+  registerLink: "http://csclub.uwaterloo.ca/",
 };
 
 The past year has been tough for all of us, having to deal with the pandemic

content/playground/alt-tab.event.mdx

@@ -1,11 +1,11 @@
 export const metadata = {
-  title: "Alt-Tab",
+  name: "Alt-Tab",
+  short: "CSC is proud to present to you Alt-Tab!",
   date: new Date("March 25, 2021 19:00:00"),
   online: true,
   location: "Twitch",
-  imgAlt: "Alt-Tab",
-  imgSrc: "/images/alt-tab.png",
-  registerSrc: "http://google.com/",
+  poster: "/images/alt-tab.png",
+  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!

content/playground/ootb-react.event.mdx

@@ -1,11 +1,11 @@
 export const metadata = {
-  title: "Out of the Box: React",
+  name: "Out of the Box: React",
+  short: "Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks.",
   date: new Date("March 23, 2021 19:00:00"),
   online: true,
   location: "Twitch",
-  imgAlt: "Out of the Box: React",
-  imgSrc: "/images/ootb-react.png",
-  registerSrc: "http://google.com/",
+  poster: "/images/ootb-react.png",
+  registerLink: "http://google.com/",
 };
 
 Modern web frameworks are a black-box. They're easy to use, but they have numerous minute details to master in order to apply them to truly scalable websites. Over the last few years, front-end frameworks have absorbed the responsibilities of the back-end, meaning it's become ever more important to dig their details out of the box.

next-env.d.ts

@@ -8,7 +8,10 @@ declare module "*.event.mdx" {
     name: string;
     short: string;
     date: Date;
+    online: boolean;
     location: string;
+    poster: string;
+    registerLink: string;
   }
 
   const ReactComponent: ComponentType;
@@ -30,22 +33,3 @@ declare module "*.news.mdx" {
   export const metadata: NewsMetadata;
   export default ReactComponent;
 }
-
-declare module "*.event-card.mdx" {
-  import { ComponentType } from "react";
-
-  interface EventCardMetadata {
-    title: string;
-    date: Date;
-    online: boolean;
-    location: string;
-    imgAlt: string;
-    imgSrc: string;
-    registerSrc: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: EventCardMetadata;
-  export default ReactComponent;
-}