component reorganization

components/media/Figure.tsx

@@ -1,9 +1,9 @@
 import Image from "./Image";
 import innerText from "react-innertext";
 import type { ReactNode } from "react";
-import type { CustomImageProps } from "./Image";
+import type { ImageProps } from "next/image";
 
-export type CustomFigureProps = Omit<CustomImageProps, "alt"> & {
+type CustomFigureProps = Omit<ImageProps, "alt"> & {
   children: ReactNode; // caption (can be in markdown, yay!!!)
   alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
 };

components/media/Image.tsx

@@ -1,23 +1,18 @@
 import Image from "next/image";
 import type { ImageProps } from "next/image";
-import type { CSSProperties } from "react";
 
-export type CustomImageProps = ImageProps & {
-  style?: CSSProperties;
-};
-
-const CustomImage = (props: CustomImageProps) => {
+const CustomImage = ({ src, width, height, alt, priority }: ImageProps) => {
   return (
-    <div className="image_wrapper" style={props.style}>
+    <div className="image_wrapper">
       <Image
-        src={props.src}
+        src={src}
         layout="intrinsic"
-        width={props.width}
-        height={props.height}
-        alt={props.alt}
+        width={width}
+        height={height}
+        alt={alt || ""}
         quality={65}
-        loading={props.priority ? "eager" : "lazy"}
-        priority={!!props.priority}
+        loading={priority ? "eager" : "lazy"}
+        priority={!!priority}
       />
     </div>
   );

components/media/Tweet.tsx

@@ -1,6 +1,10 @@
 import TweetEmbed from "react-tweet-embed";
 
-const Tweet = (props: { id: string }) => (
+type CustomTweetProps = {
+  id: string;
+};
+
+const Tweet = (props: CustomTweetProps) => (
   <TweetEmbed
     id={props.id}
     options={{

components/media/Video.tsx

@@ -2,8 +2,22 @@ import ReactPlayer from "react-player/lazy";
 import type { ReactPlayerProps } from "react-player";
 
 const Video = (props: ReactPlayerProps) => (
-  <div style={{ position: "relative", paddingTop: "56.25%" }}>
-    <ReactPlayer width="100%" height="100%" style={{ position: "absolute", top: 0, left: 0 }} {...props} />
+  <div
+    style={{
+      position: "relative",
+      paddingTop: "56.25%",
+    }}
+  >
+    <ReactPlayer
+      width="100%"
+      height="100%"
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+      }}
+      {...props}
+    />
   </div>
 );