Implementation Engineer
23 lines
1.3 KiB
Vue
23 lines
1.3 KiB
Vue
<template>
|
|
<div class="hms-eq-card" @click="$emit('click', item)" role="article" tabindex="0" @keydown.enter="$emit('click', item)">
|
|
<div class="aspect-[4/3] flex items-center justify-center relative overflow-hidden" style="background: var(--surface)">
|
|
<img v-if="item.image" :src="item.image" :alt="item.name" loading="lazy" class="absolute inset-0 w-full h-full object-cover" />
|
|
<div v-else class="text-4xl" style="color: var(--secondary)">📦</div>
|
|
<span v-if="item.category" class="hms-badge hms-badge-primary absolute top-3 left-3">{{ item.category }}</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="font-semibold text-sm mb-1 truncate" style="color: var(--text)">{{ item.name }}</h3>
|
|
<p class="text-xs mb-3 line-clamp-2" style="color: var(--secondary)">{{ item.description }}</p>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs" style="color: var(--secondary)">{{ item.code }}</span>
|
|
<button @click.stop="$emit('add-to-cart', item)" class="hms-btn hms-btn-ghost text-xs px-3 py-1.5" style="color: var(--color-accent)" :aria-label="item.name + ' zum Warenkorb hinzufügen'">+ Hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{ item: Record<string, any> }>()
|
|
defineEmits<{ click: [item: any]; 'add-to-cart': [item: any] }>()
|
|
</script>
|