mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 17:26:43 +02:00
d36b321d9d
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
37 lines
1.2 KiB
Svelte
37 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
type BadgeSize = 'sm' | 'md';
|
|
|
|
interface Props {
|
|
variant?: BadgeVariant;
|
|
size?: BadgeSize;
|
|
class?: string;
|
|
children?: Snippet;
|
|
}
|
|
|
|
let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();
|
|
|
|
const variantClasses: Record<BadgeVariant, string> = {
|
|
default: 'bg-menu text-theme border-theme',
|
|
primary: 'bg-primary/20 text-primary border-primary/30',
|
|
success: 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30',
|
|
warning: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400 border-yellow-500/30',
|
|
danger: 'bg-red-500/20 text-red-600 dark:text-red-400 border-red-500/30',
|
|
info: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30',
|
|
};
|
|
|
|
const sizeClasses: Record<BadgeSize, string> = {
|
|
sm: 'px-1.5 py-0.5 text-xs',
|
|
md: 'px-2 py-1 text-sm',
|
|
};
|
|
|
|
const classes = $derived(
|
|
`inline-flex items-center rounded-full border font-medium ${variantClasses[variant]} ${sizeClasses[size]} ${className}`
|
|
);
|
|
</script>
|
|
|
|
<span class={classes}>
|
|
{@render children?.()}
|
|
</span>
|