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%" }}

islands/Search.tsx

@@ -9,6 +9,7 @@ import { IS_BROWSER } from "$fresh/runtime.ts";
 import Checkbox from "@components/Checkbox.tsx";
 import { Rating } from "@components/Rating.tsx";
 import { useSignal } from "@preact/signals";
+import Image from "@components/Image.tsx";
 
 export const RedirectSearchHandler = () => {
   useEventListener("keydown", (e: KeyboardEvent) => {
@@ -30,7 +31,7 @@ const SearchResultImage = ({ src }: { src: string }) => {
     : src;
 
   return (
-    <img
+    <Image
       class="object-cover w-12 h-12 rounded-full"
       src={imageSrc}
       alt="preview image"
@@ -76,7 +77,7 @@ export const SearchResultList = (
   );
 };
 
-const SearchComponent = (
+const Search = (
   { q, type }: { q: string; type?: string },
 ) => {
   const [searchQuery, setSearchQuery] = useState(q);
@@ -185,4 +186,4 @@ const SearchComponent = (
   );
 };
 
-export default SearchComponent;
+export default Search;

routes/_404.tsx

@@ -1,5 +1,5 @@
-
 import { Head } from "$fresh/runtime.ts";
+import Image from "@components/Image.tsx";
 
 export default function Error404() {
   return (
@@ -9,7 +9,7 @@ export default function Error404() {
       </Head>
       <div class="px-4 py-8 mx-auto bg-[#86efac]">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
-          <img
+          <Image
             class="my-6"
             src="/logo.svg"
             width="128"