hms-licht-ton/frontend-nuxt-old/components/EmptyState.vue

<template>
  <div class="text-center py-16 px-4" role="status">
    <div class="text-6xl mb-4" aria-hidden="true">{{ icon }}</div>
    <h3 class="text-xl font-semibold mb-2" style="color: var(--text)">{{ title }}</h3>
    <p class="max-w-md mx-auto mb-6" style="color: var(--secondary)">{{ message }}</p>
    <button v-if="actionLabel" @click="$emit('action')" class="hms-btn hms-btn-primary">{{ actionLabel }}</button>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ icon?: string; title: string; message: string; actionLabel?: string }>(), { icon: '🔍' })
defineEmits<{ action: [] }>()
</script>