This repository has been archived on 2024-04-04. You can view files and clone it, but cannot push or open issues or pull requests.
tailwindui/vue/components/application-ui/data-display/stats/simple_in_cards.vue
2024-01-24 19:02:44 +08:00

19 lines
691 B
Vue

<template>
<div>
<h3 class="text-base font-semibold leading-6 text-gray-900">Last 30 days</h3>
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div v-for="item in stats" :key="item.name" class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
<dt class="truncate text-sm font-medium text-gray-500">{{ item.name }}</dt>
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ item.stat }}</dd>
</div>
</dl>
</div>
</template>
<script setup>
const stats = [
{ name: 'Total Subscribers', stat: '71,897' },
{ name: 'Avg. Open Rate', stat: '58.16%' },
{ name: 'Avg. Click Rate', stat: '24.57%' },
]
</script>