60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<!-- Card Produk -->
|
|
<div
|
|
class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
|
|
@click="$emit('click', product.id)"
|
|
>
|
|
<!-- Foto Produk -->
|
|
<img
|
|
v-if="product.foto && product.foto.length > 0"
|
|
:src="product.foto[0].url"
|
|
:alt="product.nama"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
<span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
|
|
|
|
<!-- Nama Produk di bawah -->
|
|
<div
|
|
class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
|
|
>
|
|
{{ product.nama }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifikasi Stok Menipis (di luar card) -->
|
|
<div
|
|
v-if="isStockLow"
|
|
class="absolute -top-2 -right-2 group z-20"
|
|
>
|
|
<!-- Bulatan Merah -->
|
|
<div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center cursor-help border-2 border-white shadow-md">
|
|
<span class="text-white text-xs font-bold">!</span>
|
|
</div>
|
|
|
|
<!-- Tooltip -->
|
|
<div class="absolute top-6 -right-4 bg-red-600 text-white text-xs px-3 py-2 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-30">
|
|
Stok menipis: {{ product.items_count }} pcs
|
|
<!-- Arrow untuk tooltip -->
|
|
<div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-red-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
product: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// Computed untuk mengecek apakah stok menipis (kurang dari 5)
|
|
const isStockLow = computed(() => {
|
|
return props.product.items_count < 5;
|
|
});
|
|
</script>
|