initial commit

src/lib/components/ui/Badge.svelte

@@ -0,0 +1,27 @@
+<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>