feat: some shit

components/Image.tsx

@@ -1,14 +1,25 @@
-import { isLocalImage } from "@lib/string.ts";
-
-export function Image(
-  props: { class: string; src: string; width?: number; height?: number },
-) {
-  if (isLocalImage(props.src)) {
-  }
+import * as CSS from "https://esm.sh/csstype@3.1.2";
 
+const Image = (
+  props: {
+    class: string;
+    src: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    style?: CSS.HtmlAttributes;
+  },
+) => {
   return (
-    <div>
-      <img src={props.src} width={props.width} height={props.height} />
-    </div>
+    <img
+      alt={props.alt}
+      style={props.style}
+      src={props.src}
+      width={props.width}
+      height={props.height}
+      class={props.class}
+    />
   );
-}
+};
+
+export default Image;

components/MovieCard.tsx

@@ -1,14 +1,17 @@
 import { Card } from "@components/Card.tsx";
 import { Movie } from "@lib/resource/movies.ts";
 import { Series } from "@lib/resource/series.ts";
+import { isLocalImage } from "@lib/string.ts";
 
 export function MovieCard({ movie }: { movie: Movie }) {
   const { meta: { image = "/placeholder.svg" } = {} } = movie;
 
-  const imageUrl = image?.startsWith("Media/movies/")
+  const imageUrl = isLocalImage(image)
     ? `/api/images?image=${image}&width=200&height=200`
     : image;
 
+  console.log({ imageUrl, image });
+
   return (
     <Card
       title={movie.name}

components/RecipeHero.tsx

@@ -5,6 +5,7 @@ import {
   IconExternalLink,
 } from "@components/icons.tsx";
 import { isLocalImage } from "@lib/string.ts";
+import Image from "@components/Image.tsx";
 
 export function RecipeHero(
   { data, subline, backlink, editLink }: {
@@ -28,7 +29,7 @@ export function RecipeHero(
     >
       {imageUrl &&
         (
-          <img
+          <Image
             src={imageUrl}
             alt="Recipe Banner"
             style={{ objectPosition: "0% 25%" }}