aboutsummaryrefslogtreecommitdiffstats
path: root/code/app/src/lib/components/badge.svelte
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2022-12-09 03:57:12 +0100
committerivarlovlie <git@ivarlovlie.no>2022-12-09 03:57:12 +0100
commit4dbef3fcd7a14437d55c555cf10d50de8e50d7d1 (patch)
tree632589ecfcfb4dfddeafb71d0077257584b5e7ec /code/app/src/lib/components/badge.svelte
parent914c75e0ceeb3e11ddd55e94bb461c26b0db5b7a (diff)
downloadgreatoffice-4dbef3fcd7a14437d55c555cf10d50de8e50d7d1.tar.xz
greatoffice-4dbef3fcd7a14437d55c555cf10d50de8e50d7d1.zip
feat: Move everything out of $lib
Diffstat (limited to 'code/app/src/lib/components/badge.svelte')
-rw-r--r--code/app/src/lib/components/badge.svelte76
1 files changed, 0 insertions, 76 deletions
diff --git a/code/app/src/lib/components/badge.svelte b/code/app/src/lib/components/badge.svelte
deleted file mode 100644
index 6ec48d5..0000000
--- a/code/app/src/lib/components/badge.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<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>