Add details like description and short info

api/pb_migrations/1755056714_updated_recipes.js

@@ -0,0 +1,44 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // add field
+  collection.fields.addAt(9, new Field({
+    "hidden": false,
+    "id": "number1485952547",
+    "max": null,
+    "min": null,
+    "name": "worktime",
+    "onlyInt": true,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  // add field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "number2198822773",
+    "max": null,
+    "min": null,
+    "name": "waittime",
+    "onlyInt": true,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // remove field
+  collection.fields.removeById("number1485952547")
+
+  // remove field
+  collection.fields.removeById("number2198822773")
+
+  return app.save(collection)
+})

src/components/Detail/ImageCarousel.astro

@@ -50,9 +50,9 @@ const links = await Promise.all(
     <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
     
     <div class="relative flex items-center w-full h-60">
-        <button id="dec-button" class="absolute left-2" onclick="dec()">PREV</button>
+        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
         <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={links[0]} />
         <!-- <div class="w-70 h-60 bg-green-600" /> -->
-        <button id="inc-button" class="absolute right-2" onclick="inc()">NEXT</button>
+        <button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
     </div>
 </div>

src/pages/recipe/[recipeid].astro

@@ -23,6 +23,20 @@ const ingredients = await Promise.all(
         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>
@@ -30,6 +44,16 @@ const ingredients = await Promise.all(
         <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>
@@ -37,8 +61,9 @@ const ingredients = await Promise.all(
         <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">Steps</p>
+                <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>