1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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>
|
