diff options
Diffstat (limited to 'frontend/src/lib/pills/TagPill.svelte')
-rw-r--r-- | frontend/src/lib/pills/TagPill.svelte | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte new file mode 100644 index 0000000..60221bd --- /dev/null +++ b/frontend/src/lib/pills/TagPill.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import Female from '$lib/icons/Female.svelte'; + import Location from '$lib/icons/Location.svelte'; + import Male from '$lib/icons/Male.svelte'; + import Transgender from '$lib/icons/Transgender.svelte'; + import { SvelteComponent } from 'svelte'; + import Pill, { type PillColour } from './Pill.svelte'; + + export let name: string; + export let description: string | undefined | null = undefined; + + let [namespace, tag] = name.split(':'); + + const styles: Record<string, PillColour> = { + female: 'pink', + male: 'blue', + trans: 'violet', + mixed: 'amber', + location: 'sky', + rest: 'zinc' + }; + + const icons: Record<string, typeof SvelteComponent<Record<string, unknown>>> = { + female: Female, + male: Male, + trans: Transgender, + location: Location + }; + + const colour = styles[namespace] ?? styles.rest; + const icon = icons[namespace]; + + function formatTooltip() { + return [name, description].filter((v) => v).join('\n\n'); + } +</script> + +<Pill name={tag} tooltip={formatTooltip()} {colour}> + <svelte:component this={icon} slot="icon" /> +</Pill> |