<IFrame /> component

components/Figure/Figure.tsx

@@ -3,6 +3,8 @@ import innerText from "react-innertext";
 import type { ReactNode } from "react";
 import type { ImageProps as NextImageProps } from "next/image";
 
+import styles from "./Figure.module.css";
+
 type Props = Omit<NextImageProps, "alt"> & {
   children: ReactNode; // caption (can be in markdown, yay!!!)
   alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
@@ -10,9 +12,9 @@ type Props = Omit<NextImageProps, "alt"> & {
 
 const Figure = ({ children, alt, ...imageProps }: Props) => {
   return (
-    <figure>
+    <figure className={styles.figure}>
       <Image alt={alt || innerText(children)} {...imageProps} />
-      <figcaption>{children}</figcaption>
+      <figcaption className={styles.caption}>{children}</figcaption>
     </figure>
   );
 };