1 files changed, 76 insertions, 0 deletions
diff --git a/code/app/src/components/badge.svelte b/code/app/src/components/badge.svelte
new file mode 100644
index 0000000..f967c2d
--- /dev/null
+++ b/code/app/src/components/badge.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+    export let id: string | undefined = undefined;
+    export let type: "default" | "red" | "yellow" | "green" | "blue" | "tame" = "default";
+    export let text: string;
+    export let size: "large" | "default" = "default";
+    export let withDot: boolean = false;
+    export let removable: boolean = false;
+    export let uppercase: boolean = false;
+    export let tabindex: string | undefined = undefined;
+
+    let colorName = "gray";
+    let sizeClass = "rounded px-2 py-0.5 text-xs";
+    let dotSizeClass = "mr-1.5 h-2 w-2";
+
+    const dispatch = createEventDispatcher();
+
+    function handle_remove(event) {
+        dispatch("remove", { event, id, text });
+    }
+
+    $: switch (type) {
+        case "red":
+            colorName = "red";
+            break;
+        case "yellow":
+            colorName = "yellow";
+            break;
+        case "blue":
+            colorName = "blue";
+            break;
+        case "green":
+            colorName = "teal";
+            break;
+        case "default":
+        case "tame":
+        default:
+            colorName = "gray";
+            break;
+    }
+
+    $: switch (size) {
+        case "large":
+            sizeClass = "rounded-md px-2.5 py-0.5 text-sm";
+            dotSizeClass = "-ml-0.5 mr-1.5 h-2 w-2";
+            break;
+        case "default":
+        default:
+            sizeClass = "rounded px-2 py-0.5 text-xs";
+            dotSizeClass = "mr-1.5 h-2 w-2";
+            break;
+    }
+</script>
+
+<span class="inline-flex items-center font-medium {uppercase ? 'uppercase' : ''} bg-{colorName}-100 text-{colorName}-800 {sizeClass}" {id}>
+    {#if withDot}
+        <svg class="{dotSizeClass} text-{colorName}-400" fill="currentColor" viewBox="0 0 8 8">
+            <circle cx="4" cy="4" r="3" />
+        </svg>
+    {/if}
+    {text}
+    {#if removable}
+        <button
+            on:click={handle_remove}
+            tabindex={parseInt(tabindex)}
+            type="button"
+            class="ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-{colorName}-400 hover:bg-{colorName}-200 hover:text-{colorName}-500 focus:bg-{colorName}-500 focus:outline-none"
+        >
+            <span class="sr-only">Remove badge</span>
+            <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+            </svg>
+        </button>
+    {/if}
+</span>