33 lines
956 B
Vue
33 lines
956 B
Vue
<template>
|
|
<div class="flex flex-col items-center justify-center py-12 px-4">
|
|
<div class="text-6xl mb-4">{{ icon }}</div>
|
|
<h3 class="text-lg font-semibold text-base-content mb-2">{{ title }}</h3>
|
|
<p v-if="description" class="text-base-content/60 text-center max-w-sm mb-6">{{ description }}</p>
|
|
<NuxtLink v-if="actionTo" :to="actionTo">
|
|
<button class="btn btn-primary">
|
|
<Icon v-if="actionIcon" :name="actionIcon" size="18" class="mr-2" />
|
|
{{ actionLabel }}
|
|
</button>
|
|
</NuxtLink>
|
|
<button v-else-if="actionLabel" class="btn btn-primary" @click="$emit('action')">
|
|
<Icon v-if="actionIcon" :name="actionIcon" size="18" class="mr-2" />
|
|
{{ actionLabel }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
icon: string
|
|
title: string
|
|
description?: string
|
|
actionLabel?: string
|
|
actionTo?: string
|
|
actionIcon?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
action: []
|
|
}>()
|
|
</script>
|