41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<template>
|
|
<span :class="badgeClass">
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'default', // default | success | warning | error | muted | primary
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'sm', // xs | sm | md
|
|
},
|
|
})
|
|
|
|
const variantMap: Record<string, string> = {
|
|
default: 'bg-[#f6f1ea] text-[#5f4b33]',
|
|
success: 'bg-emerald-100 text-emerald-700',
|
|
warning: 'bg-amber-100 text-amber-700',
|
|
error: 'bg-rose-100 text-rose-700',
|
|
muted: 'bg-[#efe7da] text-[#8a7761]',
|
|
primary: 'bg-[#2f2418] text-white',
|
|
}
|
|
|
|
const sizeMap: Record<string, string> = {
|
|
xs: 'px-2 py-1 text-[10px]',
|
|
sm: 'px-3 py-1 text-xs',
|
|
md: 'px-3.5 py-1.5 text-sm',
|
|
}
|
|
|
|
const badgeClass = computed(() => {
|
|
const base = 'inline-flex items-center rounded-full font-semibold'
|
|
const variantClass = variantMap[props.variant] || variantMap.default
|
|
const sizeClass = sizeMap[props.size] || sizeMap.sm
|
|
return [base, variantClass, sizeClass].join(' ')
|
|
})
|
|
</script>
|