28 lines
999 B
Vue
28 lines
999 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
color?: 'gray' | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'orange'
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), { color: 'gray' })
|
|
|
|
const colorClass = {
|
|
gray: 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
|
|
blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
|
|
green: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
|
|
red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
|
|
yellow: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
|
purple: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300',
|
|
orange: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="[
|
|
'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium font-mono',
|
|
colorClass[props.color],
|
|
]"
|
|
>
|
|
<slot />
|
|
</span>
|
|
</template>
|