new <Figure> component for image captions

components/code-block/Code.tsx

@@ -1,9 +1,9 @@
-import CopyButton from "../clipboard/CopyButton";
+import CopyButton from "./CopyButton";
 import type { ReactNode } from "react";
 
 import styles from "./Code.module.css";
 
-type CustomCodeProps = {
+export type CustomCodeProps = {
   className?: string;
   children: ReactNode;
 };

components/media/Figure.tsx

@@ -0,0 +1,20 @@
+import Image from "./Image";
+import innerText from "react-innertext";
+import type { ReactNode } from "react";
+import type { CustomImageProps } from "./Image";
+
+export type CustomFigureProps = Omit<CustomImageProps, "alt"> & {
+  children: ReactNode; // caption (can be in markdown, yay!!!)
+  alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
+};
+
+const CustomFigure = ({ children, alt, ...imageProps }: CustomFigureProps) => {
+  return (
+    <figure>
+      <Image alt={alt || innerText(children)} {...imageProps} />
+      <figcaption>{children}</figcaption>
+    </figure>
+  );
+};
+
+export default CustomFigure;

components/media/Image.tsx

@@ -2,10 +2,7 @@ import Image from "next/image";
 import type { ImageProps } from "next/image";
 import type { CSSProperties } from "react";
 
-// TODO: infer ratio when given zero/one dimensions
-// TODO: fold figure/figcaption tags into this component
-
-type CustomImageProps = ImageProps & {
+export type CustomImageProps = ImageProps & {
   style?: CSSProperties;
 };