64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
required: true,
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="overflow-hidden rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-850 dark:bg-slate-900"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1 min-w-0">
|
|
<p
|
|
class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 truncate"
|
|
>
|
|
{{ title }}
|
|
</p>
|
|
<h4
|
|
class="mt-2 text-2xl font-bold tracking-tight text-slate-900 dark:text-white truncate"
|
|
>
|
|
{{ value }}
|
|
</h4>
|
|
<p
|
|
v-if="subtitle"
|
|
class="mt-1 text-xs text-slate-500 dark:text-slate-400 truncate"
|
|
>
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-slate-50 text-slate-500 dark:bg-slate-800 dark:text-slate-400 ml-4"
|
|
>
|
|
<slot name="icon">
|
|
<svg
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75m-.75-3h1.5m-1.5 0v-1.5m0 1.5H1.5m1.5 0c-.828 0-1.5.672-1.5 1.5v12a1.5 1.5 0 0 0 1.5 1.5h15a1.5 1.5 0 0 0 1.5-1.5v-12c0-.828-.672-1.5-1.5-1.5h-15Z"
|
|
/>
|
|
</svg>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|