Files
money.sori.studio/components/EmptyState.vue
2026-08-14 13:27:57 +09:00

26 lines
668 B
Vue

<template>
<section class="mx-auto flex max-w-sm flex-col items-center px-6 py-12 text-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-paper text-lg font-extrabold text-muted">
{{ mark }}
</div>
<h2 class="mt-4 text-base font-bold text-ink">{{ title }}</h2>
<p v-if="description" class="mt-2 text-sm leading-6 text-muted">
{{ description }}
</p>
<div v-if="$slots.default" class="mt-5">
<slot />
</div>
</section>
</template>
<script setup lang="ts">
withDefaults(defineProps<{
title: string
description?: string
mark?: string
}>(), {
description: '',
mark: '-'
})
</script>