From 9372f7da2f86e43a8fc35b5042610782795d79f6 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Tue, 11 Oct 2022 12:55:31 +0800
Subject: feat: Add badges

---
 code/app/src/routes/book/+layout.svelte      |  1 +
 code/app/src/routes/book/badges/+page.svelte | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 code/app/src/routes/book/badges/+page.svelte

(limited to 'code/app/src/routes')

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>
-- 
cgit v1.3