mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-08 08:12:17 +01:00
46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { twMerge } from 'tailwind-merge';
|
|
import Badge from '@/Components/Common/Badge.vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
name: string;
|
|
size: 'base' | 'large' | 'xlarge';
|
|
tag: string;
|
|
class?: string;
|
|
color: string;
|
|
border: boolean;
|
|
}>(),
|
|
{
|
|
name: '',
|
|
size: 'base',
|
|
tag: 'div',
|
|
color: 'var(--theme-color-icon-default)',
|
|
border: true,
|
|
}
|
|
);
|
|
|
|
const indicatorClasses = {
|
|
base: 'w-2.5 h-2.5',
|
|
large: 'w-2 sm:w-3 h-2 sm:h-3',
|
|
xlarge: 'w-3 sm:w-4 h-3 sm:h-4',
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Badge :name :size :tag :class="props.class" :color :border>
|
|
<div
|
|
:style="{ backgroundColor: props.color }"
|
|
:class="
|
|
twMerge(indicatorClasses[size], 'inline-block rounded-full')
|
|
"></div>
|
|
<div>
|
|
<slot>
|
|
{{ name }}
|
|
</slot>
|
|
</div>
|
|
</Badge>
|
|
</template>
|
|
|
|
<style scoped></style>
|