mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-09 16:52:17 +01:00
51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { twMerge } from 'tailwind-merge';
|
|
import { computed } from 'vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
size: 'base' | 'large' | 'xlarge';
|
|
tag: string;
|
|
class?: string;
|
|
color: string;
|
|
border: boolean;
|
|
}>(),
|
|
{
|
|
size: 'base',
|
|
tag: 'div',
|
|
color: 'var(--theme-color-icon-default)',
|
|
border: true,
|
|
}
|
|
);
|
|
|
|
const badgeClasses = {
|
|
base: 'py-1 px-2 space-x-1.5 text-xs',
|
|
large: 'py-1 sm:py-1.5 px-2 sm:px-3 space-x-1.5 sm:space-x-2 text-xs sm:text-sm text-muted',
|
|
xlarge: 'py-2 sm:py-2.5 px-3 sm:px-3.5 space-x-2 sm:space-x-3 text-sm sm:text-sm text-muted',
|
|
};
|
|
|
|
const borderClasses = computed(() => {
|
|
if (props.border) {
|
|
return 'border-input-border border';
|
|
}
|
|
return '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="tag"
|
|
:class="
|
|
twMerge(
|
|
badgeClasses[size],
|
|
borderClasses,
|
|
'rounded inline-flex items-center font-semibold text-white',
|
|
props.class
|
|
)
|
|
">
|
|
<slot></slot>
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped></style>
|