path: root/frontend/src/lib/pills/TagPill.svelte

<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>