Status Badge

<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'

import type { BadgeVariants } from '@/components/ui/badge'

import { badgeVariants } from '@/components/ui/badge'
import { cn } from '@/lib/utils'

import type { StatusVariants } from '.'

import Status from './Status.vue'

const props = defineProps<{
    variant?: BadgeVariants['variant']
    rounded?: StatusVariants['rounded']
    class?: HTMLAttributes['class']
    color?: StatusVariants['color']
}>()
</script>

<template>
    <div :class="cn(badgeVariants({ variant }), props.class)">
        <Status :color="props.color" :rounded="props.rounded" />
        <slot />
    </div>
</template>

import type { VariantProps } from 'class-variance-authority'

import { cva } from 'class-variance-authority'

export { default as Status } from './Status.vue'
export { default as StatusBadge } from './StatusBadge.vue'

export const statusVariants = cva(
    'relative flex size-2',
    {
        variants: {
            rounded: {
                default: 'rounded-full',
                xs: 'rounded-xs',
            },
            color: {
                green: 'bg-green-500',
                red: 'bg-rose-500',
                blue: 'bg-blue-500',
                orange: 'bg-orange-500',
                purple: 'bg-purple-500',
                gray: 'bg-gray-300',
            },
            size: {

            },
        },
        defaultVariants: {
            color: 'green',
            rounded: 'default',
        },
    },
)

export type StatusVariants = VariantProps<typeof statusVariants>

<script lang="ts" setup>
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

import { cn } from '@/lib/utils'

import type { StatusVariants } from '.'

import { statusVariants } from '.'

interface Props extends PrimitiveProps {
    color?: StatusVariants['color']
    rounded?: StatusVariants['rounded']
    class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
    <span
        :class="cn(
            'mr-1',
            statusVariants({ color, rounded }),
            props.class,
        )"
    >
        <span
            :class="cn(statusVariants({ color, rounded }), 'absolute inline-flex h-full w-full animate-ping opacity-75')"
        />
        <span :class="cn(statusVariants({ color, rounded }), props.class, 'relative inline-flex')" />
    </span>
</template>