From 4dbef3fcd7a14437d55c555cf10d50de8e50d7d1 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Fri, 9 Dec 2022 11:57:12 +0900
Subject: feat: Move everything out of $lib

---
 code/app/src/components/badge.svelte | 77 ++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 code/app/src/components/badge.svelte

(limited to 'code/app/src/components/badge.svelte')

diff --git a/code/app/src/components/badge.svelte b/code/app/src/components/badge.svelte
new file mode 100644
index 0000000..e89ef36
--- /dev/null
+++ b/code/app/src/components/badge.svelte
@@ -0,0 +1,77 @@
+<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:text-white 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>
-- 
cgit v1.3