style tech talks page

components/MiniTechTalkCard.module.css

@@ -29,6 +29,10 @@
   font-size: calc(18rem / 16);
 }
 
+.content h1 > a {
+  color: var(--purple-2);
+}
+
 .card section {
   padding-bottom: 0;
 }

components/MiniTechTalkCard.tsx

@@ -1,19 +1,28 @@
 import React from "react";
 import { Image } from "./Image";
+import { Link } from "./Link";
 import styles from "./MiniTechTalkCard.module.css";
 
 interface MiniTechTalkProps {
   name: string;
   short: string;
   poster?: string;
+  url: string;
 }
 
-export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) {
+export function MiniTechTalkCard({
+  name,
+  poster,
+  short,
+  url,
+}: MiniTechTalkProps) {
   return (
     <article className={styles.card}>
       <aside>{poster && <Image alt={name} src={poster} />}</aside>
       <section className={styles.content}>
-        <h1>{name}</h1>
+        <h1>
+          <Link href={url}>{name}</Link>
+        </h1>
         <p>{short}</p>
       </section>
     </article>

content/playground/temp.talk.mdx

@@ -2,6 +2,7 @@ export const metadata = {
   name: "Tech Talk Title",
   short: "Learn how React works and make your own version!",
   poster: "/images/playground/alt-tab.jpg",
+  url: "/playground",
 };
 
 You've got a game, but you didn't write it. You're running it by emulating the machine it was meant to run on, and the machine it was

next-env.d.ts

@@ -70,6 +70,7 @@ declare module "*.talk.mdx" {
     name: string;
     short: string;
     poster?: string;
+    url: string;
   }
 
   const ReactComponent: ComponentType;

pages/resources/tech-talks.module.css

@@ -27,3 +27,16 @@
   object-fit: cover;
   border: 5px solid #555;
 }
+
+.miniCards > *:nth-child(odd) {
+  background: var(--background-teal-2);
+}
+
+.miniCards {
+  margin-top: calc(60rem / 16);
+  margin-bottom: calc(140rem / 16);
+}
+
+.miniCards a {
+  text-decoration: none;
+}

pages/resources/tech-talks.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import { Image } from "../../components/Image";
 import styles from "./tech-talks.module.css";
+import { MiniTechTalkCard } from "../../components/MiniTechTalkCard";
+
+import TempTechTalk, {
+  metadata as tempTechTalkMetadata,
+} from "../../content/playground/temp.talk.mdx";
 
 export default function TechTalks() {
   return (
@@ -19,7 +24,17 @@ export default function TechTalks() {
           className={styles.image}
         />
       </div>
-      <div className={styles.content}>{/* <Content /> */}</div>
+      <div className={styles.miniCards}>
+        <MiniTechTalkCard {...tempTechTalkMetadata}>
+          <TempTechTalk />
+        </MiniTechTalkCard>
+        <MiniTechTalkCard {...tempTechTalkMetadata}>
+          <TempTechTalk />
+        </MiniTechTalkCard>
+        <MiniTechTalkCard {...tempTechTalkMetadata}>
+          <TempTechTalk />
+        </MiniTechTalkCard>
+      </div>
     </>
   );
 }