feat: add movies

components/Card.tsx

@@ -10,7 +10,7 @@ export function Card(
         backgroundImage: `url(${image})`,
         backgroundSize: "cover",
       }}
-      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
+      class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
   lg:w-56 lg:h-56 
   sm:w-40 sm:h-40 
   w-32 h-32"

components/MovieCard.tsx

@@ -0,0 +1,18 @@
+import { Card } from "@components/Card.tsx";
+import { Movie } from "@lib/movies.ts";
+
+export function MovieCard({ movie }: { movie: Movie }) {
+  const { meta: { image = "/placeholder.svg" } = {} } = movie;
+
+  const imageUrl = image?.startsWith("Media/movies/")
+    ? `/api/images?image=${image}&width=200&height=200`
+    : image;
+
+  return (
+    <Card
+      title={movie.name}
+      image={imageUrl}
+      link={`/movies/${movie.id}`}
+    />
+  );
+}

components/RecipeHero.tsx

@@ -2,12 +2,18 @@ import { Recipe } from "@lib/recipes.ts";
 
 import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
 import { Star } from "@components/Stars.tsx";
-export function RecipeHero({ recipe }: { recipe: Recipe }) {
-  const { meta: { image } = {} } = recipe;
+export function RecipeHero(
+  { data, backlink }: {
+    backlink: string;
+    data: { meta?: { image?: string; link?: string }; name: string };
+  },
+) {
+  const { meta: { image } = {} } = data;
 
-  const imageUrl = image?.startsWith("Recipes/images/")
-    ? `/api/images?image=${image}&width=800`
-    : image;
+  const imageUrl =
+    (image?.startsWith("Recipes/images/") || image?.startsWith("Media/movies/"))
+      ? `/api/images?image=${image}&width=800`
+      : image;
 
   return (
     <div
@@ -27,17 +33,17 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
       <div class="absolute top-8 left-8 ">
         <a
           class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg block"
-          href="/recipes"
+          href={backlink}
         >
           Back
         </a>
       </div>
 
-      {recipe.meta?.link &&
+      {data.meta?.link &&
         (
           <div class="absolute top-8 right-8 ">
             <a
-              href={recipe.meta.link}
+              href={data.meta.link}
               target="__blank"
               class="p-2 ml-4 bg-gray-300 text-gray-800 rounded-lg flex"
               name="Link to Original recipe"
@@ -56,10 +62,10 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
           class="relative text-4xl font-bold z-10"
           style={{ color: imageUrl ? "#1F1F1F" : "white" }}
         >
-          {recipe.name}
+          {data.name}
         </h2>
 
-        {recipe.meta?.rating && <Star rating={recipe.meta.rating} />}
+        {data.meta?.rating && <Star rating={data.meta.rating} />}
       </div>
     </div>
   );