feat: update some shit

routes/recipes/[name].tsx

@@ -1,14 +1,15 @@
 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 Counter from "@islands/Counter.tsx";
 import { useSignal } from "@preact/signals";
 import { getRecipe, Recipe } from "@lib/resource/recipes.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import PageHero from "@components/PageHero.tsx";
+import { Star } from "@components/Stars.tsx";
 
-export const handler: Handlers<Recipe | null> = {
+export const handler: Handlers<{ recipe: Recipe; session: unknown } | null> = {
   async GET(_, ctx) {
     const recipe = await getRecipe(ctx.params.name);
     return ctx.render({ recipe, session: ctx.state.session });
@@ -25,7 +26,7 @@ export default function Greet(
 
   const subline = [
     recipe?.meta?.time && `Duration ${recipe.meta.time}`,
-  ].filter(Boolean);
+  ].filter(Boolean) as string[];
 
   return (
     <MainLayout
@@ -35,14 +36,25 @@ export default function Greet(
     >
       <RedirectSearchHandler />
       <KMenu type="main" context={recipe} />
-      <RecipeHero
-        data={recipe}
-        backlink="/recipes"
-        editLink={session
-          ? `https://notes.max-richter.dev/Recipes/${recipe.id}`
-          : ""}
-        subline={subline}
-      />
+
+      <PageHero image={recipe.meta?.image} thumbnail={recipe.meta?.thumbnail}>
+        <PageHero.Header>
+          <PageHero.BackLink href="/articles" />
+          {session && (
+            <PageHero.EditLink
+              href={`https://notes.max-richter.dev/Recipes/${recipe.id}`}
+            />
+          )}
+        </PageHero.Header>
+        <PageHero.Footer>
+          <PageHero.Title>{recipe.name}</PageHero.Title>
+          <PageHero.Subline
+            entries={subline}
+          >
+            {recipe.meta?.rating && <Star rating={recipe.meta?.rating} />}
+          </PageHero.Subline>
+        </PageHero.Footer>
+      </PageHero>
       <div class="px-8 text-white mt-10">
         <div class="flex items-center gap-8">
           <h3 class="text-3xl my-5">Ingredients</h3>