irgi/Kdm-Product-Mobile
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ProductListPage): slicing UI Product list, with ionic proper way

Browse Source
This commit is contained in:
herirudini
2026-02-24 10:39:39 +07:00
parent bea844dd84
commit 3ba907f950
6 changed files with 82 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/product/ProductCard.vue
View File

@@ -1,22 +1,20 @@
<template>
<ion-card
button
@click="$router.push('/products')"
class="rounded-2xl shadow-md p-3 text-center"
>
<div class="h-20 bg-gray-100 rounded-lg mb-3 flex items-center justify-center">
<span class="text-gray-400 text-sm">PHOTO</span>
</div>
<ion-card button @click="$router.push('/products/'+product.id)" :class="product.stock ? 'bg-blue-50 border-blue-100' : 'bg-red-50 border-red-100'"
class="rounded-2xl border m-0 aspect-square relative">
<div class="h-full w-full flex flex-col justify-between items-center absolute p-4">
<div class="flex-1 flex items-center">
<div class="font-bold text-xl mb-2 text-center text-neutral-800">
{{ product.name }}
</div>
</div>
<h3 class="font-semibold text-sm mb-2">
{{ product.name }}
</h3>
<div
class="text-xs font-medium px-3 py-1 rounded-full inline-block"
:class="product.stock > 0 ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
>
{{ product.stock > 0 ? `Ready ${product.stock} Unit` : 'No Stock' }}
<div class="h-fit font-medium p-1 rounded-full bg-neutral-800 w-full flex items-center">
<div class="h-full aspect-square rounded-full" :class="product.stock ? 'bg-green-400' : 'bg-red-400'">
</div>
<div class="py-1 pl-2 text-neutral-200 text-xs">
{{ product.stock > 0 ? `Ready ${product.stock} Unit` : 'No Stock' }}
</div>
</div>
</div>
</ion-card>
</template>