support video

Author: tyrelchambers

src/components/Resource/README.md

@@ -103,4 +103,4 @@ Both approaches work! Use imported images for better optimization, or use path s
 ## Resource types
 
 - **article**: Displays "Read the full article" footer with an arrow icon
-- **video**: No special footer (just the card with title and description)
+- **video**: No special footer (just the card with title and description). For video resources, the `image` prop can be a YouTube video thumbnail URL, and the `link` prop can be the YouTube video URL

src/components/Resource/ResourceCard.astro

@@ -1,27 +1,28 @@
 ---
-import { Typography, SvgArrowRight2 } from "@chainlink/blocks"
+import { Typography, SvgArrowRight2, SvgButtonPlay } from "@chainlink/blocks"
 import type { ImageMetadata } from "astro"
 import styles from "./ResourceCard.module.css"
+import { ResourceItem } from "./ResourceGrid.astro"
 
-interface Props {
-  image?: string | ImageMetadata
-  imageAlt?: string
-  label: string
-  link: string
-  description: string
-  type: "article" | "video"
-}
+type Props = ResourceItem
 
 const { image, imageAlt, label, link, description, type } = Astro.props
 
 const imageSrc = typeof image === "string" ? image : image?.src
+
+const isVideo = type === "video"
 ---
 
-<a href={link} class={styles.card}>
+<a href={link} class={styles.card} target={isVideo ? "_blank" : "_self"}>
   {
     imageSrc && (
       <div class={styles.imageWrapper}>
         <img src={imageSrc} alt={imageAlt} class={styles.image} />
+        <div class={styles.overlay}>
+          <span class={styles.playButtonWrapper}>
+            <SvgButtonPlay color="card" width={15} height={17.25} />
+          </span>
+        </div>
       </div>
     )
   }

src/components/Resource/ResourceCard.module.css

@@ -20,11 +20,36 @@
   background-color: var(--muted);
 }
 
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.playButtonWrapper {
+  background-color: var(--brand);
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & svg {
+    color: var(--white);
+    fill: var(--white);
+  }
+}
+
 .imageWrapper {
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: var(--space-2x);
+  position: relative;
 }
 
 .image {