Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<span :class="badgeClasses">
<slot />
</span>
</template>
<script setup lang="ts">
/**
* BaseBadge
* @description Reusable badge/tag component for status indicators
*/
import type { EventType, AttendanceStatus } from '~/types'
interface Props {
/** Badge variant for different contexts */
variant?: EventType | AttendanceStatus | 'default' | 'info'
/** Badge size */
size?: 'sm' | 'md'
}
const props = withDefaults(defineProps<Props>(), {
variant: 'default',
size: 'md'
})
const badgeClasses = computed(() => {
const base = 'inline-flex items-center font-medium rounded-full'
const sizes = {
sm: 'px-2 py-0.5 text-xs',
md: 'px-2.5 py-0.5 text-sm'
}
const variants: Record<string, string> = {
// Event types
practice: 'bg-info-100 text-info-800',
game: 'bg-purple-100 text-purple-800',
// Attendance status
yes: 'bg-success-100 text-success-800',
no: 'bg-error-100 text-error-800',
maybe: 'bg-warning-100 text-warning-800',
// General
default: 'bg-secondary-100 text-secondary-800',
info: 'bg-info-100 text-info-800'
}
return [base, sizes[props.size], variants[props.variant] || variants.default]
})
</script>
|