From 6d7c856ef990eaae7fc9d7075705d5cfcce38ce2 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Sat, 27 Apr 2024 23:32:31 +0200
Subject: [PATCH] full recipe

---
 components/recipe/card.vue | 2 +-
 composables/useRecipe.ts   | 6 ++++--
 pages/random.vue           | 6 +++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/recipe/card.vue b/components/recipe/card.vue
index c51f8c7..09203da 100644
--- a/components/recipe/card.vue
+++ b/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" />
diff --git a/composables/useRecipe.ts b/composables/useRecipe.ts
index 114967c..376944c 100644
--- a/composables/useRecipe.ts
+++ b/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 {
diff --git a/pages/random.vue b/pages/random.vue
index 3c10d8a..575d4d2 100644
--- a/pages/random.vue
+++ b/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>