Mostly adapt the infoview stuff

web/src/pages/recipe/[id].astro

@@ -1,12 +1,16 @@
 ---
 import Base from "@layout/Base";
 import ImageCarousel from "@component/detail/ImageCarousel";
+import InfoView from "@component/detail/InfoView";
+import { Recipe } from "@tmlmt/cooklang-parser";
 import { authPB } from "@data/pb";
 
 const { id } = Astro.params
-
 const pb = await authPB()
+
 const re = await pb.collection('recipes').getOne(id as string)
+const recipe = new Recipe(re.cooklang)
+
 const images = await Promise.all(
     re.images.map(r => pb.files.getURL(re, r))
 )
@@ -16,10 +20,16 @@ const images = await Promise.all(
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
             <ImageCarousel class="w-full" images={images} />
-            <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
+            <p class="text-[28pt] font-bold leading-11 mt-2">{recipe.metadata.title ?? "Untitled Recipe"}</p>
 
             <!-- Details -->
-            <!-- <InfoView re={re} /> -->
+            <InfoView 
+                prepTime={recipe.metadata["prep time"]}
+                cookTime={recipe.metadata["cook time"]}
+                description={recipe.metadata.description}
+                servings={recipe.metadata.servings}
+                tags={recipe.metadata.tags}
+            />
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
             <!-- <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients ?? []}  /> -->