ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +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>
<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" />

6
composables/useRecipe.ts
View file

@ -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 {

6
pages/random.vue
View file

@ -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>