feat: add movies

routes/movies/[name].tsx

@@ -1,44 +1,28 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
-import { IngredientsList } from "@islands/IngredientsList.tsx";
-import { RecipeHero } from "@components/RecipeHero.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
-import { Recipe } from "@lib/recipes.ts";
-import { getRecipe } from "../api/recipes/[name].ts";
-import Counter from "@islands/Counter.tsx";
-import { useSignal } from "@preact/signals";
+import { Movie } from "@lib/movies.ts";
+import { getMovie } from "../api/movies/[name].ts";
+import { RecipeHero } from "@components/RecipeHero.tsx";
 
-export const handler: Handlers<Recipe | null> = {
+export const handler: Handlers<Movie | null> = {
   async GET(_, ctx) {
-    const recipe = await getRecipe(ctx.params.name);
-    return ctx.render(recipe);
+    const movie = await getMovie(ctx.params.name);
+    return ctx.render(movie);
   },
 };
 
-export default function Greet(props: PageProps<Recipe>) {
-  const recipe = props.data;
-
-  const portion = recipe.meta?.portion;
-  const amount = useSignal(portion || 1);
+export default function Greet(props: PageProps<Movie>) {
+  const movie = props.data;
 
   return (
     <MainLayout url={props.url}>
-      <RecipeHero recipe={recipe} />
+      <RecipeHero data={movie} backlink="/movies" />
       <div class="px-8 text-white mt-10">
-        <div class="flex items-center gap-8">
-          <h3 class="text-3xl my-5">Ingredients</h3>
-          {portion && <Counter count={amount} />}
-        </div>
-        <IngredientsList
-          ingredients={recipe.ingredients}
-          amount={amount}
-          portion={portion}
-        />
-        <h3 class="text-3xl my-5">Preparation</h3>
         <pre
           class="whitespace-break-spaces"
-          dangerouslySetInnerHTML={{ __html: recipe.preparation || "" }}
+          dangerouslySetInnerHTML={{ __html: movie.description || "" }}
         >
-          {recipe.preparation}
+          {movie.description}
         </pre>
       </div>
     </MainLayout>

routes/movies/index.tsx

@@ -4,14 +4,18 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { Recipe } from "@lib/recipes.ts";
 import { getRecipes } from "../api/recipes/index.ts";
 import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
-export const handler: Handlers<Recipe[] | null> = {
+import { getMovies } from "../api/movies/index.ts";
+import { Movie } from "@lib/movies.ts";
+import { MovieCard } from "@components/MovieCard.tsx";
+
+export const handler: Handlers<Movie[] | null> = {
   async GET(_, ctx) {
-    const recipes = await getRecipes();
-    return ctx.render(recipes);
+    const movies = await getMovies();
+    return ctx.render(movies);
   },
 };
 
-export default function Greet(props: PageProps<Recipe[] | null>) {
+export default function Greet(props: PageProps<Movie[] | null>) {
   return (
     <MainLayout url={props.url}>
       <header class="flex gap-4 items-center mb-5 md:hidden">
@@ -23,11 +27,11 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
           Back
         </a>
 
-        <h3 class="text-2xl text-white font-light">Recipes</h3>
+        <h3 class="text-2xl text-white font-light">🍿 Movies</h3>
       </header>
       <div class="flex flex-wrap items-center gap-4 px-4">
         {props.data?.map((doc) => {
-          return <RecipeCard recipe={doc} />;
+          return <MovieCard movie={doc} />;
         })}
       </div>
     </MainLayout>