full recipe

components/recipe/card.vue

@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="card-body items-center text-center">
+  <div class="card-body items-center text-center bg-base-200">
     <h2 class="card-title">{{ title }}</h2>
     <figure class="px-10 py-5">
       <NuxtImg :src="pictureUrl" alt="Shoes" class="rounded-xl" />

composables/useRecipe.ts

@@ -5,14 +5,15 @@ type Recipe = {
   category: string;
   origin: string;
   ingredients: { name: string; quantitiy: number };
+  instructions: string;
 };
 
 export default async function () {
   const { data, pending, error } = await useAsyncData(
     "random",
-    () => {
+    async () => {
       const config = useRuntimeConfig();
-      return $fetch(`${config.apiUrl}random.php`);
+      return await $fetch(`${config.apiUrl}random.php`);
     },
     { lazy: true },
   );
@@ -38,6 +39,7 @@ export default async function () {
     category: tmp.value.strCategory,
     origin: tmp.value.strArea,
     ingredients: names.map((name, i) => ({ name, quantity: quantities[i] })),
+    instructions: tmp.value.strInstructions,
   });
 
   return {

pages/random.vue

@@ -7,7 +7,7 @@ const { recipe, pending, error } = await useRecipe();
   <div v-else-if="error">Failed: {{ error }}</div>
   <section v-else>
     <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">
+      <div class="card w-96 bg-base-100 shadow-xl mx-auto lg:mx-2 min-h-32">
         <RecipeCard
           :title="recipe.title"
           :picture-url="recipe.pictureUrl"
@@ -19,5 +19,9 @@ const { recipe, pending, error } = await useRecipe();
 
       <RecipeIngredients :ingredients="recipe.ingredients" />
     </div>
+    <div class="flex flex-col items-center">
+      <h2 class="prose lg:prose-xl">Instructions</h2>
+      <p class="prose">{{ recipe.instructions }}</p>
+    </div>
   </section>
 </template>