fix: make recipe ingredinets interactive

routes/recipes/[name].tsx

@@ -3,7 +3,6 @@ import { IngredientsList } from "@islands/IngredientsList.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import Counter from "@islands/Counter.tsx";
 import { Signal, useSignal } from "@preact/signals";
-import { Recipe } from "@lib/recipeSchema.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import PageHero from "@components/PageHero.tsx";
@@ -12,8 +11,12 @@ import { renderMarkdown } from "@lib/markdown.ts";
 import { isValidRecipe } from "@lib/recipeSchema.ts";
 import { MetaTags } from "@components/MetaTags.tsx";
 import { fetchResource } from "@lib/marka/index.ts";
+import { RecipeResource } from "@lib/marka/schema.ts";
+import { parseIngredients } from "@lib/parseIngredient.ts";
 
-export const handler: Handlers<{ recipe: Recipe; session: unknown } | null> = {
+export const handler: Handlers<
+  { recipe: RecipeResource; session: unknown } | null
+> = {
   async GET(_, ctx) {
     try {
       const recipe = await fetchResource(`recipes/${ctx.params.name}.md`);
@@ -31,7 +34,11 @@ function ValidRecipe({
   recipe,
   amount,
   portion,
-}: { recipe: Recipe; amount: Signal<number>; portion: number }) {
+}: { recipe: RecipeResource; amount: Signal<number>; portion: number }) {
+  const ingredients = parseIngredients(
+    recipe.content.recipeIngredient?.join("\n"),
+  );
+
   return (
     <>
       <div class="flex items-center gap-8">
@@ -39,7 +46,7 @@ function ValidRecipe({
         {portion && <Counter count={amount} />}
       </div>
       <IngredientsList
-        ingredients={recipe.content.recipeIngredient}
+        ingredients={ingredients}
         amount={amount}
         portion={portion}
       />