hms-licht-ton/frontend-nuxt-old/components/EquipmentCard.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>