a56151fec9
Extract repeated badge template (SVG icon + current/max display) into a reusable CapacityBadge component. Reduces AccountCapacityCell from ~300 lines to ~180 lines with identical behavior.
26 lines
610 B
Vue
26 lines
610 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
colorClass: string
|
|
tooltip?: string
|
|
current: string | number
|
|
max: string | number
|
|
suffix?: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="[
|
|
'inline-flex items-center gap-1 rounded-md px-1.5 py-px text-[10px] font-medium leading-tight',
|
|
colorClass
|
|
]"
|
|
:title="tooltip"
|
|
>
|
|
<slot />
|
|
<span class="font-mono">{{ current }}</span>
|
|
<span class="text-gray-400 dark:text-gray-500">/</span>
|
|
<span class="font-mono">{{ max }}</span>
|
|
<span v-if="suffix" class="text-[9px] opacity-60">{{ suffix }}</span>
|
|
</span>
|
|
</template>
|