feat(products): display product image in ProductCard

frontend/src/components/products/ProductCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Product } from '@/api/types';
 import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { imageUrl } from '@/api/image';
 
 defineProps<{
     item: Product
@@ -9,7 +10,15 @@ defineProps<{
 </script>
 
 <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>
             <CardTitle>{{ item.name }}</CardTitle>
             <CardDescription>${{ item.price }} - {{ item.stock_quantity }} st</CardDescription>
@@ -18,7 +27,7 @@ defineProps<{
             </CardAction>
         </CardHeader>
 
-        <CardContent>
+        <CardContent class="pb-6">
             {{ item.description }}
         </CardContent>
     </Card>