34 lines
957 B
Vue
34 lines
957 B
Vue
<template>
|
|
<div class="text-center py-12">
|
|
<div v-if="icon" class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
|
|
<component :is="icon" class="w-8 h-8 text-base-content/30" aria-hidden="true" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-base-content mb-1">{{ title }}</h3>
|
|
<p v-if="description" class="text-sm text-base-content/50 mb-6">{{ description }}</p>
|
|
<slot>
|
|
<NuxtLink v-if="actionTo" :to="actionTo" class="btn btn-primary btn-sm">
|
|
{{ actionLabel }}
|
|
</NuxtLink>
|
|
<button v-else-if="actionLabel" type="button" class="btn btn-primary btn-sm" @click="$emit('action')">
|
|
{{ actionLabel }}
|
|
</button>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Component } from 'vue'
|
|
|
|
defineProps<{
|
|
title: string
|
|
description?: string
|
|
icon?: Component
|
|
actionLabel?: string
|
|
actionTo?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
action: []
|
|
}>()
|
|
</script>
|