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

full recipe

Browse source
This commit is contained in:
Ruidy 2024-04-27 23:32:31 +02:00
parent e80b11ef17
commit 6d7c856ef9
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/recipe/card.vue
View file

@ -9,7 +9,7 @@ defineProps<{
</script> </script>
<template> <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> <h2 class="card-title">{{ title }}</h2>
<figure class="px-10 py-5"> <figure class="px-10 py-5">
<NuxtImg :src="pictureUrl" alt="Shoes" class="rounded-xl" /> <NuxtImg :src="pictureUrl" alt="Shoes" class="rounded-xl" />

6
composables/useRecipe.ts
View file

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

6
pages/random.vue
View file

@ -7,7 +7,7 @@ const { recipe, pending, error } = await useRecipe();
<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"> <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 <RecipeCard
:title="recipe.title" :title="recipe.title"
:picture-url="recipe.pictureUrl" :picture-url="recipe.pictureUrl"
@ -19,5 +19,9 @@ const { recipe, pending, error } = await useRecipe();
<RecipeIngredients :ingredients="recipe.ingredients" /> <RecipeIngredients :ingredients="recipe.ingredients" />
</div> </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>