diff options
Diffstat (limited to 'code/app')
| -rw-r--r-- | code/app/src/lib/components/badge.svelte | 75 | ||||
| -rw-r--r-- | code/app/src/lib/components/index.ts | 4 | ||||
| -rw-r--r-- | code/app/src/lib/components/project-status-badge.svelte | 24 | ||||
| -rw-r--r-- | code/app/src/routes/book/+layout.svelte | 1 | ||||
| -rw-r--r-- | code/app/src/routes/book/badges/+page.svelte | 18 |
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> |