45 lines
950 B
Vue
45 lines
950 B
Vue
<template>
|
|
<span
|
|
class="rounded-md my-1 truncate text-sm text-violet-title px-2 py-1"
|
|
:class="[
|
|
typeClasses,
|
|
capitalize,
|
|
withHashTag ? `before:content-['#']` : '',
|
|
]"
|
|
>
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
variant?: "info" | "danger" | "warning" | "light" | "primary";
|
|
capitalize?: boolean;
|
|
withHashTag?: boolean;
|
|
}>(),
|
|
{ variant: "light", capitalize: false, withHashTag: false }
|
|
);
|
|
|
|
const typeClasses = computed(() => {
|
|
switch (props.variant) {
|
|
default:
|
|
case "light":
|
|
return "bg-purple-3 dark:text-violet-3";
|
|
case "info":
|
|
return "bg-mbz-info dark:text-black";
|
|
case "warning":
|
|
return "bg-yellow-1";
|
|
case "danger":
|
|
return "bg-mbz-danger dark:text-white";
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
span.withHashTag::before {
|
|
content: "#";
|
|
}
|
|
</style>
|