41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
|
<!--
|
||
|
|
Component: Badge
|
||
|
|
Small status indicator with color variants and size options
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
interface Props {
|
||
|
|
/**
|
||
|
|
* Color variant of the badge
|
||
|
|
* @default default
|
||
|
|
*/
|
||
|
|
variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
|
||
|
|
/**
|
||
|
|
* Size of the badge
|
||
|
|
* @default md
|
||
|
|
*/
|
||
|
|
size?: 'sm' | 'md';
|
||
|
|
}
|
||
|
|
|
||
|
|
const { variant = 'default', size = 'md' }: Props = $props();
|
||
|
|
|
||
|
|
const baseClasses = 'inline-flex items-center justify-center rounded-full font-medium';
|
||
|
|
|
||
|
|
const variantClasses = $derived(
|
||
|
|
variant === 'success'
|
||
|
|
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||
|
|
: variant === 'warning'
|
||
|
|
? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||
|
|
: variant === 'error'
|
||
|
|
? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
|
||
|
|
: variant === 'info'
|
||
|
|
? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
|
||
|
|
: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
|
||
|
|
);
|
||
|
|
|
||
|
|
const sizeClasses = $derived(size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-0.5 text-sm');
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<span class="{baseClasses} {variantClasses} {sizeClasses}">
|
||
|
|
<slot />
|
||
|
|
</span>
|