Initial commit0.1.0

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>