assembly/components/Badge.vue

35 lines
1.2 KiB
Vue
Raw Normal View History

2021-07-24 23:40:30 +00:00
<template>
<div
2021-07-27 18:54:59 +00:00
class="flex items-center justify-center flex-shrink-0 px-2 py-1.5 leading-none whitespace-no-wrap transition-colors duration-75 ease-out select-none font-semibold rounded-[4px]"
2021-07-24 23:40:30 +00:00
:class="{
2021-07-27 18:54:59 +00:00
'text-[10px]': !large,
2021-07-24 23:40:30 +00:00
'text-12': large,
2021-07-27 18:54:59 +00:00
'bg-green-pure text-green-light dark:bg-opacity-17 dark:text-light':
color === 'green-pure',
2021-07-24 23:40:30 +00:00
'bg-grey-pure bg-opacity-17 text-grey-pure': color === 'grey',
'bg-blue-pure bg-opacity-20 text-blue-pure': color === 'blue',
'bg-green-pure bg-opacity-20 text-green-pure': color === 'green',
'bg-yellow-pure bg-opacity-25 text-yellow-pure': color === 'yellow',
'bg-orange-pure bg-opacity-25 text-orange-pure': color === 'orange',
2021-07-27 18:54:59 +00:00
'bg-passion-orange-pure bg-opacity-25 text-passion-orange-pure':
color === 'passion-orange',
'bg-red-pure dark:bg-opacity-25 text-white dark:text-light':
color === 'red',
'bg-red-800 bg-opacity-25 text-red-800': color === 'red-dark'
2021-07-24 23:40:30 +00:00
}"
>
<slot />
</div>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api'
export default defineComponent({
props: {
color: { type: String, default: null },
large: { type: Boolean, default: false },
},
})
</script>