27 lines
1003 B
Vue
27 lines
1003 B
Vue
<template>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<script setup>
|
|
import { IonCard } from '@ionic/vue'
|
|
defineProps({
|
|
product: Object
|
|
})
|
|
</script> |