solidtime/resources/js/Components/Common/Project/ProjectBadge.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 shrink-0'
                )
            "></div>
        <div class="min-w-0">
            <slot>
                {{ name }}
            </slot>
        </div>
    </Badge>
</template>

<style scoped></style>