ingredients list

components/recipe/ingredients.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  ingredients: { name: string; quantity: number }[];
+}>();
+</script>
+
+<template>
+  <div class="overflow-x-auto">
+    <table class="table table-s table-pin-rows table-pin-cols">
+      <thead>
+        <tr>
+          <th></th>
+          <td>Ingredient</td>
+          <td>Quantity</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(ingredient, i) in ingredients">
+          <th>{{ i + 1 }}</th>
+          <td>{{ ingredient.name }}</td>
+          <td>{{ ingredient.quantity }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

composables/useRecipe.ts

@@ -4,6 +4,7 @@ type Recipe = {
   videoUrl: string;
   category: string;
   origin: string;
+  ingredients: { name: string; quantitiy: number };
 };
 
 export default async function () {
@@ -18,12 +19,25 @@ export default async function () {
 
   const tmp = computed(() => data.value?.meals?.[0]);
 
+  let names = [];
+  let quantities = [];
+  let i = 0;
+  for (const [k, v] of Object.entries(tmp.value)) {
+    if (k.startsWith("strIngredient") && !!v) {
+      names.push(v);
+    } else if (k.startsWith("strMeasure") && !!v) {
+      quantities.push(v);
+    }
+    i++;
+  }
+
   const recipe = reactive<Recipe>({
     title: tmp.value.strMeal,
     pictureUrl: tmp.value.strMealThumb,
     videoUrl: tmp.value.strYoutube,
     category: tmp.value.strCategory,
     origin: tmp.value.strArea,
+    ingredients: names.map((name, i) => ({ name, quantity: quantities[i] })),
   });
 
   return {

pages/random.vue

@@ -6,14 +6,18 @@ const { recipe, pending, error } = await useRecipe();
   <div v-if="pending">Loading</div>
   <div v-else-if="error">Failed: {{ error }}</div>
   <section v-else>
-    <div class="card w-96 bg-base-100 shadow-xl">
-      <RecipeCard
-        :title="recipe.title"
-        :picture-url="recipe.pictureUrl"
-        :video-url="recipe.videoUrl"
-        :category="recipe.category"
-        :origin="recipe.origin"
-      />
+    <div class="lg:flex space-y-4 lg:justify-evenly py-4">
+      <div class="card w-96 bg-base-100 shadow-xl mx-auto lg:mx-2">
+        <RecipeCard
+          :title="recipe.title"
+          :picture-url="recipe.pictureUrl"
+          :video-url="recipe.videoUrl"
+          :category="recipe.category"
+          :origin="recipe.origin"
+        />
+      </div>
+
+      <RecipeIngredients :ingredients="recipe.ingredients" />
     </div>
   </section>
 </template>