32 lines
779 B
Vue
32 lines
779 B
Vue
<template>
|
|
<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>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
product: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|