Skip to content

Commit

Permalink
Merge pull request #2 from vachmara/design
Browse files Browse the repository at this point in the history
feat: add recipes design
  • Loading branch information
vachmara authored Jun 18, 2023
2 parents f8f6074 + 2c53b95 commit 53b1357
Show file tree
Hide file tree
Showing 6 changed files with 229 additions and 4 deletions.
22 changes: 22 additions & 0 deletions assets/recipe_example.json
Original file line number Diff line number Diff line change
@@ -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."
}
41 changes: 41 additions & 0 deletions components/Modal.vue
Original file line number Diff line number Diff line change
@@ -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>
142 changes: 142 additions & 0 deletions components/RecipeCard.vue
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 18 additions & 2 deletions components/Search.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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()}%` : "" }}
Expand Down Expand Up @@ -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
Expand All @@ -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 = [];
Expand Down Expand Up @@ -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;
}
Expand Down
6 changes: 5 additions & 1 deletion pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,9 @@ export default {
}
</script>

<style scoped>
<style>
::selection {
background-color: #ffa7e4;
color: #ffffff;
}
</style>
2 changes: 1 addition & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export default {
theme: {
extend: {
colors: {
test: "#5ce1e6",
primary: "#5ce1e6",
}
}
}
Expand Down

0 comments on commit 53b1357

Please sign in to comment.