diff options
Diffstat (limited to 'code')
| -rw-r--r-- | code/app/src/components/badge.svelte | 19 |
1 files changed, 9 insertions, 10 deletions
diff --git a/code/app/src/components/badge.svelte b/code/app/src/components/badge.svelte index e89ef36..f967c2d 100644 --- a/code/app/src/components/badge.svelte +++ b/code/app/src/components/badge.svelte @@ -1,5 +1,5 @@ <script lang="ts"> - import {createEventDispatcher} from "svelte"; + import { createEventDispatcher } from "svelte"; export let id: string | undefined = undefined; export let type: "default" | "red" | "yellow" | "green" | "blue" | "tame" = "default"; @@ -17,7 +17,7 @@ const dispatch = createEventDispatcher(); function handle_remove(event) { - dispatch("remove", {event, id, text}); + dispatch("remove", { event, id, text }); } $: switch (type) { @@ -53,24 +53,23 @@ } </script> -<span class="inline-flex items-center font-medium {uppercase ? 'uppercase' : ''} bg-{colorName}-100 text-{colorName}-800 {sizeClass}" - {id}> +<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"/> + <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" + 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"/> + <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" /> </svg> </button> {/if} |