feat: Add badges

5 files changed, 122 insertions, 0 deletions

diff --git a/code/app/src/lib/components/badge.svelte b/code/app/src/lib/components/badge.svelte
new file mode 100644
index 0000000..fdffb11
--- /dev/null
+++ b/code/app/src/lib/components/badge.svelte
@@ -0,0 +1,75 @@
+<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 removeable: boolean = false;
+    export let uppercase: boolean = false;
+
+    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) {
+        event.target.closest("span").remove();
+        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}">
+    {#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 removeable}
+        <button
+            on:click={handle_remove}
+            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>
diff --git a/code/app/src/lib/components/index.ts b/code/app/src/lib/components/index.ts
index a81e0c3..5ed1f09 100644
--- a/code/app/src/lib/components/index.ts
+++ b/code/app/src/lib/components/index.ts
@@ -4,8 +4,12 @@ import Checkbox from "./checkbox.svelte";
 import Input from "./input.svelte";
 import LocaleSwitcher from "./locale-switcher.svelte";
 import Switch from "./switch.svelte";
+import Badge from "./badge.svelte";
+import ProjectStatusBadge from "./project-status-badge.svelte";
 
 export {
+    Badge,
+    ProjectStatusBadge,
     Alert,
     Button,
     Checkbox,
diff --git a/code/app/src/lib/components/project-status-badge.svelte b/code/app/src/lib/components/project-status-badge.svelte
new file mode 100644
index 0000000..5390344
--- /dev/null
+++ b/code/app/src/lib/components/project-status-badge.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { ProjectStatus } from "$lib/models/projects/ProjectStatus";
+    import Badge from "./badge.svelte";
+    export let status: string | ProjectStatus;
+
+    let text = "";
+    let type = "default" as any;
+    $: switch (status) {
+        case "idl":
+            type = "tame";
+            text = "IDLE";
+            break;
+        case "exp":
+            type = "yellow";
+            text = "EXPIRED";
+            break;
+        case "act":
+            type = "green";
+            text = "ACTIVE";
+            break;
+    }
+</script>
+
+<Badge {text} {type} uppercase />
diff --git a/code/app/src/routes/book/+layout.svelte b/code/app/src/routes/book/+layout.svelte
index f5287e0..bc40e67 100644
--- a/code/app/src/routes/book/+layout.svelte
+++ b/code/app/src/routes/book/+layout.svelte
@@ -9,6 +9,7 @@
         <a href="/book/buttons" class="link" class:active={$page.url.pathname.startsWith("/book/buttons")}>Buttons</a>
         <a href="/book/toggles" class="link" class:active={$page.url.pathname.startsWith("/book/toggles")}>Toggles</a>
         <a href="/book/inputs" class="link" class:active={$page.url.pathname.startsWith("/book/inputs")}>Inputs</a>
+        <a href="/book/badges" class="link" class:active={$page.url.pathname.startsWith("/book/badges")}>Badges</a>
     </nav>
     <main>
         <slot />
diff --git a/code/app/src/routes/book/badges/+page.svelte b/code/app/src/routes/book/badges/+page.svelte
new file mode 100644
index 0000000..1e06a7c
--- /dev/null
+++ b/code/app/src/routes/book/badges/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import Badge from "$lib/components/badge.svelte";
+</script>
+
+<section>
+    <h2>Variants</h2>
+    <Badge text="default" />
+    <Badge type="blue" text="blue" />
+    <Badge type="green" text="green" />
+    <Badge type="red" text="red" />
+    <Badge type="tame" text="tame" />
+    <Badge type="yellow" text="yellow" />
+    <Badge size="large" text="large" />
+    <Badge text="with dot" withDot type="blue" />
+    <Badge text="removable" removeable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)} />
+    <Badge text="with dot" size="large" withDot type="blue" />
+    <Badge text="removable" removeable size="large" id="badge-2" uppercase on:remove={(e) => alert("removed " + e.detail.id)} />
+</section>