ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-12 13:26:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use shared component for the recipe

Browse source
This commit is contained in:
Ruidy 2024-04-28 19:55:24 +02:00
parent 98888fd814
commit a567a4c41a
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
3 changed files with 29 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
components/recipe/index.vue Normal file
View file

@ -0,0 +1,27 @@
<script setup lang="ts">
const props = defineProps<{
recipe: Recipe;
}>();
</script>
<template>
<div>
<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 min-h-32">
<RecipeCard
:title="recipe.title"
:picture-url="recipe.pictureUrl"
:video-url="recipe.videoUrl"
:category="recipe.category"
:origin="recipe.origin"
/>
</div>
<RecipeIngredients :ingredients="recipe.ingredients" />
</div>
<div class="flex flex-col items-center p-4">
<h2 class="prose lg:prose-xl">Instructions</h2>
<p class="prose">{{ recipe.instructions }}</p>
</div>
</div>
</template>

18
pages/[id].vue
View file

@ -7,22 +7,6 @@ const { recipe, pending, error } = await useRecipe("lookup", params.id);
<div v-if="pending">Loading</div> <div v-if="pending">Loading</div>
<div v-else-if="error">Failed: {{ error }}</div> <div v-else-if="error">Failed: {{ error }}</div>
<section v-else> <section v-else>
<div class="lg:flex space-y-4 lg:justify-evenly py-4"> <Recipe :recipe="recipe" />
<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"
:video-url="recipe.videoUrl"
:category="recipe.category"
:origin="recipe.origin"
/>
</div>
<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> </section>
</template> </template>

24
pages/random.vue
View file

@ -1,10 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
definePageMeta({
pageTransition: {
name: "custom-flip",
mode: "out-in",
},
});
const { recipe, pending, error } = await useRecipe("random"); const { recipe, pending, error } = await useRecipe("random");
</script> </script>
@ -12,22 +6,6 @@ const { recipe, pending, error } = await useRecipe("random");
<div v-if="pending">Loading</div> <div v-if="pending">Loading</div>
<div v-else-if="error">Failed: {{ error }}</div> <div v-else-if="error">Failed: {{ error }}</div>
<section v-else> <section v-else>
<div class="lg:flex space-y-4 lg:justify-evenly py-4"> <Recipe :recipe="recipe" />
<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"
:video-url="recipe.videoUrl"
:category="recipe.category"
:origin="recipe.origin"
/>
</div>
<RecipeIngredients :ingredients="recipe.ingredients" />
</div>
<div class="flex flex-col items-center p-4">
<h2 class="prose lg:prose-xl">Instructions</h2>
<p class="prose">{{ recipe.instructions }}</p>
</div>
</section> </section>
</template> </template>