pnx/BitHarbor
1
0
Fork 0
Code Activity

feat(products): display product image in ProductCard

Browse source
This commit is contained in:
Henrik Hautakoski 2026-04-29 21:51:14 +02:00
parent 798f170989
commit bd3988ce1d
1 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/components/products/ProductCard.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Product } from '@/api/types'; import type { Product } from '@/api/types';
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'; import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
import { imageUrl } from '@/api/image';
defineProps<{ defineProps<{
item: Product item: Product
@ -9,7 +10,15 @@ defineProps<{
</script> </script>
<template> <template>
<Card variant="soft"> <Card variant="soft" class="py-0 overflow-auto">
<img
v-if="item.thumbnail_url"
:src="imageUrl(item.thumbnail_url)"
:alt="item.name"
class="h-48 w-full object-cover"
loading="lazy"
>
<CardHeader> <CardHeader>
<CardTitle>{{ item.name }}</CardTitle> <CardTitle>{{ item.name }}</CardTitle>
<CardDescription>${{ item.price }} - {{ item.stock_quantity }} st</CardDescription> <CardDescription>${{ item.price }} - {{ item.stock_quantity }} st</CardDescription>
@ -18,7 +27,7 @@ defineProps<{
</CardAction> </CardAction>
</CardHeader> </CardHeader>
<CardContent> <CardContent class="pb-6">
{{ item.description }} {{ item.description }}
</CardContent> </CardContent>
</Card> </Card>