Create MiniEventCard

.vscode/settings.json

@@ -2,6 +2,13 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.format.enable": true,
   "eslint.codeActionsOnSave.mode": "all",
+  "[css]": {
+    "editor.suggest.insertMode": "replace",
+    "gitlens.codeLens.scopes": [
+      "document"
+    ],
+    "editor.formatOnSave": true
+  },
   "[javascript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {

components/MiniEventCard.module.css

@@ -0,0 +1,43 @@
+.miniEventCard {
+  max-width: 936px;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--purple-2);
+  padding: 1.25rem;
+  font-size: 0.875rem;
+}
+
+.name {
+  display: flex;
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+.nameSpacer {
+  width: 140px;
+}
+
+.info {
+  margin-top: 0;
+}
+
+.details {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  color: var(--blue-2);
+  margin: 1.25rem;
+}
+
+.miniEventCard[open] .shortDescription {
+  display: none;
+}
+
+.miniEventCard[open] .dropDownIcon {
+  transform: rotate(180deg);
+}
+
+.miniEventCard > summary {
+  list-style: none;
+}

components/MiniEventCard.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from "react";
+import styles from "./MiniEventCard.module.css";
+
+interface Props {
+  name: string;
+  descriptionShort: string;
+  description: ReactNode;
+  location: string;
+  date: string;
+  time: string;
+}
+
+const dropDownIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="9"
+    viewBox="0 0 14 9"
+    fill="none"
+    className={styles.dropDownIcon}
+  >
+    <path
+      d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
+      fill="#1482E3"
+    />
+  </svg>
+);
+
+export const MiniEventCard: React.FC<Props> = ({
+  name,
+  descriptionShort,
+  description,
+  location,
+  date,
+  time,
+}) => {
+  return (
+    <details className={styles.miniEventCard}>
+      <summary>
+        <div onClick={(event) => event.preventDefault()}>
+          <h2 className={styles.name}>
+            <div>{name}</div>
+            <div className={styles.nameSpacer}></div>
+          </h2>
+          <p className={styles.info}>
+            {location} | {date} | {time}
+          </p>
+          <p className={styles.shortDescription}>{descriptionShort}</p>
+        </div>
+
+        <p className={styles.details}>View details {dropDownIcon}</p>
+      </summary>
+
+      <div>{description}</div>
+    </details>
+  );
+};

components/playground.module.css

@@ -1,12 +1,3 @@
-.playground {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 0;
-  width: 250px;
-  height: 250px;
-  border-radius: 50%;
-  border: 4px solid var(--blue-2);
-  background-color: var(--off-white);
+.miniEventCardDemo > *:nth-child(odd) {
+  background: #E1EEFA;
 }

components/playground.tsx

@@ -1,12 +1,52 @@
 import React from "react";
+
 import styles from "./playground.module.css";
 
-export function Playground() {
+import AfterHoursContent, {
+  metadata as afterHoursMetadata,
+} from "../content/playground/after-hours.event.mdx";
+
+import { MiniEventCard } from "./MiniEventCard";
+
+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",
+  });
+
   return (
-    <ul className={styles.playground}>
-      <li>Some</li>
-      <li>React</li>
-      <li>Content</li>
-    </ul>
+    <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 />}
+      />
+    </div>
   );
 }

content/playground/after-hours.event.mdx

@@ -0,0 +1,19 @@
+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",
+};
+
+The past year has been tough for all of us, having to deal with the pandemic
+while studying or working remotely. If you've felt that meeting new people and
+sustaining relationships with others has never been more challenging, we feel
+that too, and we want to talk about it.
+
+CSC brings you the third chapter of Afterhours, and this time we're discussing
+Personal Relationships. Join us for a chat about how our relationships
+(platonic and romantic) have been affected, whether that be due to co-op,
+sequence changes, or COVID. We'll be sharing our own personal stories and we'd
+love for you all to join in on the discussion.
+
+Registration is required for attendance, so don't miss out!

next-env.d.ts

@@ -1,2 +1,16 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+
+interface EventMetadata {
+  name: string;
+  short: string;
+  date: Date;
+  location: string;
+}
+
+declare module "*.event.mdx" {
+  const ReactComponent: ComponentType;
+
+  export const metadata: EventMetadata;
+  export default ReactComponent;
+}

pages/_app.css

@@ -2,6 +2,10 @@
   font-family: "Poppins", "sans-serif";
 }
 
+code, pre {
+  font-family: monospace;
+}
+
 /* Default is light theme */
 body {
   --off-white: #fdf8f5;

pages/index.mdx

@@ -1,14 +1 @@
-# Home page
-
-Let's write some markdown.
-
-- foo
-- bar
-- baz
-
-## Subtopic
-
-More stuff
-
-1. hello
-1. world
+Visit the [playground](/playground)

pages/playground.mdx

@@ -1,11 +1,10 @@
-import {Playground} from '../components/playground'
+import {MiniEventCardDemo} from '../components/playground'
 
 # Playground
 
-- _Some_
-- **Markdown**
-- [Content](https://csclub.uwaterloo.ca)
+## `<MiniEventCard />`
 
----
+The `<MiniEventCard />` component has a collapsible description, and it used on
+the events page. It uses the `<details>` tag and works without JS!
 
-<Playground />
+<MiniEventCardDemo />