28 lines
678 B
Svelte
28 lines
678 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte'
|
|
|
|
interface Props {
|
|
children: Snippet
|
|
variant?: 'default' | 'green' | 'red' | 'blue' | 'yellow'
|
|
class?: string
|
|
}
|
|
|
|
let { children, variant = 'default', class: className = '' }: Props = $props()
|
|
|
|
const variantClasses = {
|
|
default: 'bg-gray-100 text-gray-800',
|
|
green: 'bg-green-100 text-green-800',
|
|
red: 'bg-red-100 text-red-800',
|
|
blue: 'bg-blue-50 text-blue-700',
|
|
yellow: 'bg-yellow-100 text-yellow-800',
|
|
}
|
|
</script>
|
|
|
|
<span
|
|
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {variantClasses[
|
|
variant
|
|
]} {className}"
|
|
>
|
|
{@render children()}
|
|
</span>
|