Beginning recipe detail view

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

@@ -0,0 +1,34 @@
+---
+import Base from "@layout/Base";
+import ImageCarousel from "@component/detail/ImageCarousel";
+import { authPB } from "@data/pb";
+
+const { id } = Astro.params
+
+const pb = await authPB()
+const re = await pb.collection('recipes').getOne(id as string)
+const images = await Promise.all(
+    re.images.map(r => pb.files.getURL(re, r))
+)
+---
+
+<Base>
+    <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>
+
+            <!-- Details -->
+            <!-- <InfoView re={re} /> -->
+
+            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
+            <!-- <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients ?? []}  /> -->
+        </div>
+        
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+            <!-- Steps -->
+            <!-- <StepView class="md:ml-3" steps={re.expand.steps ?? []} /> -->
+        </div>
+
+    </div>
+</Base>