Merge pull request #2 from vachmara/design

feat: add recipes design

assets/recipe_example.json

@@ -0,0 +1,22 @@
+{
+    "title": "Exemple de recette",
+    "preparation_time": "15 minutes",
+    "cooking_time": "30 minutes",
+    "people_quantity": "4 personnes",
+    "stars": "4",
+    "ingredients": [
+      {
+        "name": "Ingrédient 1",
+        "quantity": "100g"
+      },
+      {
+        "name": "Ingrédient 2",
+        "quantity": "2 pièces"
+      }
+    ],
+    "instructions": [
+       "Préchauffez votre four à 180°C.",
+       "Mélangez les ingrédients dans un saladier."
+    ],
+    "notes": "Vous pouvez ajouter un assaisonnement de votre choix pour personnaliser la recette."
+}

components/Modal.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    v-show="visible"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60"
+  >
+    <div class=" bg-white rounded p-4 space-y-4 overflow-auto">
+      <header class="border-b">
+        <slot name="header"></slot>
+      </header>
+
+      <main class="mb-4">
+        <slot name="body"></slot>
+      </main>
+
+      <footer>
+        <button
+          @click="close"
+          class="py-1 px-3 text-white bg-blue-500 rounded-md hover:bg-blue-400"
+        >
+          Fermer
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>

components/RecipeCard.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="p-3">
+    <div v-if="isSkeleton" class="animate-pulse p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-primary">
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+      <ul>
+        <li
+          v-for="(ingredient, index) in recipe.ingredients"
+          :key="index"
+          class="list-disc list-inside"
+        >
+            <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4 w-1/2"></div>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      v-else
+      class="p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-primary"
+      :class="isDisabled ? 'opacity-50 cursor-default' : ''"
+      @click="isDisabled ? null : openModal()"
+    >
+      <h2 class="text-xl font-bold">{{ recipe.title }}</h2>
+      <ul>
+        <li
+          v-for="(ingredient, index) in recipe.ingredients"
+          :key="index"
+          class="list-disc list-inside"
+        >
+          {{ ingredient.name }}
+        </li>
+      </ul>
+    </div>
+
+    <transition name="modal-transition">
+      <Modal v-show="showModal" @close="closeModal">
+        <template v-slot:header>
+          <h2 class="text-2xl font-bold">
+            {{ recipe.title }}
+            <button
+              type="button"
+              class="float-right font-bold text-xl hover:text-blue-500"
+              @click="closeModal"
+            >
+              &times;
+            </button>
+          </h2>
+        </template>
+
+        <template v-slot:body>
+          <div>
+            <h3 class="font-bold">
+              Préparation estimée: {{ recipe.preparation_time }}
+            </h3>
+            <h3 class="font-bold">
+              Cuisson estimée: {{ recipe.cooking_time }}
+            </h3>
+            <h3 class="font-bold">
+              Nombre de personnes: {{ recipe.people_quantity }}
+            </h3>
+          </div>
+          <h3 class="font-bold">Ingrédients:</h3>
+          <ul>
+            <li
+              v-for="(ingredient, index) in recipe.ingredients"
+              :key="index"
+              class="list-disc list-inside"
+            >
+              {{ ingredient.name }} - {{ ingredient.quantity }}
+            </li>
+          </ul>
+          <h3 class="font-bold">Instructions:</h3>
+          <ol>
+            <li
+              v-for="(instruction, index) in recipe.instructions"
+              :key="index"
+              class="list-decimal list-inside"
+            >
+              {{ instruction }}
+            </li>
+          </ol>
+          <p>{{ recipe.notes }}</p>
+        </template>
+      </Modal>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Modal from "./Modal.vue";
+
+export default {
+  components: {
+    Modal,
+  },
+  props: {
+    recipe: {
+      type: Object,
+      default: () => ({}),
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isSkeleton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+  methods: {
+    openModal() {
+      this.showModal = true;
+    },
+    closeModal() {
+      this.showModal = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.modal-transition-enter-active,
+.modal-transition-leave-active {
+  transition: all 0.3s;
+}
+.modal-transition-enter-from,
+.modal-transition-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+h3 {
+  padding: 10px 0px 10px 0px;
+}
+
+li::marker{
+    width: 15px;
+}
+</style>

components/Search.vue

@@ -8,7 +8,7 @@
       class="w-full bg-gray-200 h-4 rounded-full dark:bg-gray-700"
     >
       <div
-        class="bg-blue-600 text-xs font-medium h-4 text-blue-100 text-center p-0.5 leading-none rounded-full"
+        class="bg-primary text-xs font-medium h-4 text-blue-100 text-center p-0.5 leading-none rounded-full"
         :style="`width: ${percentage()}%`"
       >
         {{ percentage() ? `${percentage()}%` : "" }}
@@ -41,9 +41,14 @@
       </multiselect>
     </div>
 
+    <div class="flex justify-center align-center mt-4">
+      <RecipeCard :recipe="exampleRecipe" isSkeleton />
+      <RecipeCard :recipe="exampleRecipe" isSkeleton />
+    </div>
+
     <button
       id="generate"
-      :class="`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ${values.length < MINIMUM_INGREDIENTS ? 'opacity-50 cursor-not-allowed' : ''}`"
+      :class="`bg-primary text-white font-bold py-2 px-4 rounded ${values.length < MINIMUM_INGREDIENTS ? 'opacity-50 cursor-not-allowed' : ''}`"
       @click="generateRecipes"
     >
       Générer des recettes
@@ -53,16 +58,22 @@
 
 <script>
 import Ingredients from "~/assets/ingredients.json";
+import RecipeExample from "~/assets/recipe_example.json";
+import RecipeCard from "./RecipeCard.vue";
 
 export default {
   data() {
     return {
       isLoading: null,
       values: ["Pomme de terre"],
       options: Ingredients.options,
+      exampleRecipe: RecipeExample,
       MINIMUM_INGREDIENTS: 4,
     };
   },
+  components: {
+    RecipeCard,
+  },
   methods: {
     clearAll() {
       this.values = [];
@@ -113,6 +124,11 @@ export default {
   cursor: pointer;
 }
 
+.multiselect__tag, .multiselect__option--highlight, .multiselect__option--highlight::after {
+  background-color: #61e2e7 !important;
+  color: #ffffff;
+}
+
 #progress_bar > div {
   transition: width 0.5s ease-in-out;
 }

pages/index.vue

@@ -19,5 +19,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+::selection {
+  background-color: #ffa7e4;
+  color: #ffffff;
+}
 </style>

tailwind.config.js

@@ -2,7 +2,7 @@ export default {
     theme: {
       extend: {
         colors: {
-          test: "#5ce1e6", 
+          primary: "#5ce1e6", 
         }
       }
     }