diff options
Diffstat (limited to 'frontend/src/lib/pills/Pill.svelte')
| -rw-r--r-- | frontend/src/lib/pills/Pill.svelte | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte index 7aa9670..24d617d 100644 --- a/frontend/src/lib/pills/Pill.svelte +++ b/frontend/src/lib/pills/Pill.svelte @@ -1,15 +1,22 @@ -<script lang="ts" context="module"> +<script lang="ts" module> export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky'; </script> <script lang="ts"> - export let name: string; - export let tooltip: string | null | undefined = undefined; - export let colour: PillColour = 'zinc'; + import type { Snippet } from 'svelte'; + + interface Props { + name: string; + tooltip?: string | null; + colour?: PillColour; + icon?: Snippet; + } + + let { name, tooltip, colour = 'zinc', icon }: Props = $props(); </script> <div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}> - <slot name="icon" /> + {@render icon?.()} <span>{name}</span> </div> |