[PIE-8] Add recipe detail view And Other Major Changes (!6)

- Adds /recipe/:id page
- (Almost!) fully designed and functional recipe view
- Has steps, images, ingredients, peripheral info (work/wait time, rating, description, servings)
- New colour scheme! Much more monotone but in a nice way (imo)
- New font, not condensed
- Several more smaller design changes
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

src/pages/recipe/[recipeid].astro

@@ -0,0 +1,79 @@
+---
+import client from "@/data/pocketbase";
+import SiteLayout from "@/layouts/base";
+import ImageCarousel from "@/components/Detail/ImageCarousel";
+import IngredientTableView from "@/components/Detail/IngredientTableView";
+
+const { recipeid } = Astro.params;
+
+const re = await client.collection("recipes").getOne(recipeid ?? "0");
+
+const stepIds = re.steps
+
+let steps = await Promise.all(
+    stepIds.map(async s =>
+        await client.collection("steps").getOne(s)
+    )
+)
+
+steps = steps.sort((a, b) => a.index - b.index);
+
+const ingredients = await Promise.all(
+    re.ingredients.map(async s =>
+        await client.collection("ingredients").getOne(s)
+    )
+)
+
+function formatTime(seconds) {
+    if (seconds === 0) return null
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    let result = "";
+    if (h > 0) result += `${h}h`;
+    if (m > 0) result += `${m}m`;
+    if (result === "") result = "0m";
+    return result;
+}
+
+const workTime = formatTime(re.worktime)
+const waitTime = formatTime(re.waittime)
+---
+
+<SiteLayout>
+    <div class="flex flex-col md:flex-row">
+        <div class="flex flex-col ">
+            <ImageCarousel class="w-full" recipe={re} />
+            <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
+
+            <!-- Details -->
+            <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
+            <div class="flex pt-1">
+                {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
+                {workTime && (<p class="border-r px-2">{workTime} work</p>)}
+                {waitTime && (<p class="border-r px-2">{waitTime} wait</p>)}
+                {re.rating !== 0 && (<p class="pl-2">{re.rating}⭐️</p>)}
+            </div>
+
+            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
+        </div>
+        
+        <div class="flex flex-col">
+            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
+
+            <!-- Steps -->
+            <div class="md:ml-5 mt-2 md:mt-0">
+                <p class="text-[22pt] font-bold md:hidden">Steps</p>
+                { steps.map(s => (
+                    <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
+                        <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
+                        <p>{s.instruction}</p>
+                    </div>
+                )) }
+            </div>
+
+            
+        </div>
+
+    </div>
+</SiteLayout>