8000 food page almost done · WilliamBostrom/Nuxt-vue@fc6c31a · GitHub
[go: up one dir, main page]
Skip to content

Commit fc6c31a

Browse files
WilliamBostromWilliamBostrom
committed
food page almost done
1 parent c85bfcf commit fc6c31a

File tree

7 files changed

+111
-17
lines changed

7 files changed

+111
-17
lines changed

‎assets/css/tailwind.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
/* body {
6-
@apply bg-grey-100;
7-
} */
5+
body {
6+
@apply bg-gray-50;
7+
}
88

99
@layer components {
1010
.btn {
1111
@apply bg-[#12b488] text-white px-3 py-2 rounded-md text-sm;
1212
}
13+
.card {
14+
@apply p-3 rounded-md bg-white shadow-md h-full mt-3;
15+
}
1316
}

‎components/MenuCard.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="card text-center">
3+
<img :src="recipe.image" alt="recipe thumb" class="thumb" />
4+
<p class="font-bold text-gray-500 truncate">{{ recipe.name }}</p>
5+
<NuxtLink :to="`/menu/${recipe.id}`">
6+
<p class="btn">View Details</p>
7+
</NuxtLink>
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
const { recipe } = defineProps(["recipe"]);
13+
</script>
14+
15+
<style scoped>
16+
.thumb {
17+
max-height: 120px;
18+
max-width: 70%;
19+
margin: 0 auto;
20+
}
21+
</style>

‎components/MenuDetails.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="card">
3+
<div class="grid grid-cols-2 gap-10">
4+
<div class="p-7">
5+
<img :src="recipe.image" alt="recipe image" class="mx-auto my-7" />
6+
</div>
7+
<div class="p-7">
8+
<h2 class="text-4xl my-7">{{ recipe.name }}</h2>
9+
<div class="flex gap-2">
10+
<p class="pr-[12px] border-r border-gray-200">
11+
<span class="font-bold">{{ recipe.ingredients.length }}</span>
12+
Ingredients
13+
</p>
14+
<p class="pl-[8px]">
15+
<span class="font-bold">{{ recipe.cookTimeMinutes }}</span>
16+
min
17+
</p>
18+
</div>
19+
<aside>
20+
<div>
21+
<h3 class="text-2xl my-5 underline">Do like this</h3>
22+
<ol>
23+
<li
24+
v-for="(instructions, index) in recipe.instructions"
25+
:key="index"
26+
>
27+
{{ index + 1 + "." }} {{ instructions }}
28+
</li>
29+
</ol>
30+
</div>
31+
<div>
32+
<h3 class="text-2xl my-5 underline">Ingredients</h3>
33+
<ul>
34+
<li
35+
v-for="(ingredient, index) in recipe.ingredients"
36+
:key="index"
37+
>
38+
{{ ingredient }}
39+
</li>
40+
</ul>
41+
</div>
42+
</aside>
43+
</div>
44+
</div>
45+
</div>
46+
</template>
47+
48+
<script setup lang="ts">
49+
const { recipe } = defineProps(["recipe"]);
50+
</script>
51+
52+
<style scoped>
53+
li {
54+
margin-bottom: 8px;
55+
font-size: 16px;
56+
line-height: 1.2;
57+
}
58+
</style>

‎layouts/default.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
<div>
33
<header class="shadow-sm bg-white">
44
<nav class="container-mx-auto p-4 flex justify-between">
5-
<NuxtLink to="/" class="font-bold">Nuxt Chas Academy</NuxtLink>
5+
<NuxtLink to="/" class="font-bold text-2xl">Nuxt Chas Academy</NuxtLink>
66
<ul class="flex gap-4">
77
<li><NuxtLink to="/">Home</NuxtLink></li>
8-
<li><NuxtLink to="/about">About</NuxtLink></li>
98
<li><NuxtLink to="/todo">Todo List</NuxtLink></li>
109

1110
<li><NuxtLink class="btn" to="/menu">Food menu</NuxtLink></li>
@@ -22,4 +21,7 @@
2221
.router-link-exact-active {
2322
color: #12b488;
2423
}
24+
.btn {
25+
color: white;
26+
}
2527
</style>

‎layouts/menu.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@
22
<div>
33
<header class="shadow-sm bg-white">
44
<nav class="container mx-auto p-4">
5-
<NuxtLink to="/menu" class="font-bold">Nuxt Chas Menu</NuxtLink>
5+
<NuxtLink to="/menu" class="font-bold text-2xl"
6+
>Nuxt Chas Menu</NuxtLink
7+
>
68
</nav>
79
</header>
810
<main class="container mx-auto p4">
911
<slot />
1012
</main>
11-
<footer class="container mx-auto p4 flex justify-between border-t-2">
12-
<ul class="flex gap-4">
13+
<footer class="container mx-auto p4 flex justify-end border-t-2">
14+
<ul class="flex gap-4 py-4">
1315
<li><NuxtLink to="/">Home</NuxtLink></li>
14-
<li><NuxtLink to="/menu">Food menu</NuxtLink></li>
16+
1517
<li><NuxtLink to="/todo">To Do List</NuxtLink></li>
16-
<li><NuxtLink to="/about">About</NuxtLink></li>
18+
<li><NuxtLink class="btn" to="/menu">Food menu</NuxtLink></li>
1719
</ul>
1820
</footer>
1921
</div>

‎pages/menu/[id].vue

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
<template>
22
<div v-if="recipe">
3-
<div>Food details for {{ id }}</div>
4-
<div>{{ recipe.name }}</div>
3+
<!-- <div
4+
class="container mx-auto p-4 flex justify-center flex-col items-center"
5+
>
6+
<img class="w-[400px]" :src="recipe.image" :alt="recipe.name" />
7+
<div>{{ recipe.name }}</div>
8+
</div> -->
9+
10+
<MenuDetails :recipe="recipe" />
511
</div>
12+
613
<div v-else>Loading...</div>
714
</template>
815

916
<script setup lang="ts">
1017
const { id } = useRoute().params;
11-
definePageMeta({
12-
layout: "menu",
13-
});
1418
1519
const { data: recipe } = await useFetch<Recipe>(
1620
`https://dummyjson.com/recipes/${id}`
1721
);
22+
23+
definePageMeta({
24+
layout: "menu",
25+
});
1826
</script>
1927

2028
<style scoped></style>

‎pages/menu/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<main>
33
<div class="grid grid-cols-4 gap-5">
44
<div v-for="recipe in recipes" :key="recipe.id">
5-
<NuxtLink :to="`/menu/${recipe.id}`">{{ recipe.name }}</NuxtLink>
5+
<MenuCard :recipe="recipe" />
66
</div>
77
</div>
88
</main>
@@ -19,7 +19,7 @@ const { data } = await useFetch<{ recipes: Recipe[] }>(
1919
);
2020
2121
const recipes: Recipe[] = data.value?.recipes || [];
22-
console.log(recipes);
22+
// console.log(recipes);
2323
</script>
2424

2525
<style scoped>

0 commit comments

Comments
 (0)
0