UI update
This commit is contained in:
@@ -9,14 +9,20 @@
|
||||
|
||||
<v-divider class="mb-10 separator"></v-divider>
|
||||
|
||||
<v-btn to="/" variant="text" class="back-link mb-8" color="#6d5e4a">
|
||||
<v-icon icon="mdi-chevron-left" class="mr-1"></v-icon>
|
||||
Return to Scanner
|
||||
<v-btn
|
||||
to="/"
|
||||
class="back-to-home-btn mb-10"
|
||||
size="large"
|
||||
elevation="0"
|
||||
block
|
||||
>
|
||||
<v-icon icon="mdi-arrow-left" class="mr-2"></v-icon>
|
||||
Back to Recipe Upload
|
||||
</v-btn>
|
||||
|
||||
<v-row>
|
||||
<v-col v-for="n in 6" :key="n" cols="12" sm="6" md="4">
|
||||
<v-card class="gallery-item-card pa-4" elevation="2">
|
||||
<v-row v-if="recipes?.length">
|
||||
<v-col v-for="recipe in recipes" :key="recipe.id" cols="12" sm="6" md="4">
|
||||
<v-card class="gallery-item-card pa-4">
|
||||
<v-img
|
||||
src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c"
|
||||
height="200"
|
||||
@@ -30,8 +36,10 @@
|
||||
</template>
|
||||
</v-img>
|
||||
|
||||
<h3 class="gallery-item-title text-center">Grandma's Stew</h3>
|
||||
<p class="gallery-item-date text-center">Added March 2026</p>
|
||||
<h3 class="gallery-item-title text-center">{{ recipe.title }}</h3>
|
||||
<p class="gallery-item-date text-center">
|
||||
Added {{ new Date(recipe.createdAt).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
|
||||
</p>
|
||||
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn variant="text" class="view-recipe-btn" color="#556b2f">
|
||||
@@ -41,6 +49,39 @@
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-else justify="center" class="py-10 text-center">
|
||||
<v-col cols="12">
|
||||
<p class="brand-subtitle mb-4">Your collection is empty.</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import '@/assets/css/gallery.css'
|
||||
//const config = useRuntimeConfig();
|
||||
//const { data: recipes } = await useFetch(`${config.public.apiBase}api/recipe`);
|
||||
const recipes = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: 'Salmon Salad',
|
||||
createdAt: '2026-03-05T12:00:00Z',
|
||||
description: 'A fresh herb-crusted salmon over greens.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Power Bowl',
|
||||
createdAt: '2026-03-04T10:00:00Z',
|
||||
description: 'Rich and earthy pesto with toasted walnuts.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Protein Slam',
|
||||
createdAt: '2026-03-01T08:00:00Z',
|
||||
description: 'Crispy crust with a light, airy center.'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
Reference in New Issue
Block a user