frontend: Simplify Pill handling

Where before we handled the styling of pills (such as their icons and
colours) in multiple different places, instead centralize all of this in
the base Pill component.

1 files changed, 29 insertions, 20 deletions

diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index e7c6a8f..494cbe4 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -1,49 +1,58 @@
-<script lang="ts" module>
-	export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
-</script>
-
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-
 	interface Props {
 		name: string;
 		tooltip?: string | null;
-		colour?: PillColour;
-		icon?: Snippet;
+		style: string;
 	}
 
-	let { name, tooltip, colour = 'zinc', icon }: Props = $props();
+	let { name, tooltip, style }: Props = $props();
 </script>
 
-<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}>
-	{@render icon?.()}
+<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}>
+	{#if style === 'female'}
+		<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
+	{:else if style === 'male'}
+		<span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
+	{:else if style === 'trans'}
+		<span class="icon-xs icon-[material-symbols--transgender]"></span>
+	{:else if style === 'location'}
+		<span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
+	{:else if style === 'artist'}
+		<span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
+	{:else if style === 'character'}
+		<span class="icon-xs icon-[material-symbols--face]"></span>
+	{:else if style === 'circle'}
+		<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
+	{:else if style === 'world'}
+		<span class="icon-xs icon-[material-symbols--public]"></span>
+	{/if}
 	<span>{name}</span>
 </div>
 
 <style lang="postcss">
 	@reference "tailwindcss/theme";
 
-	.pink {
+	div {
+		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
+	}
+
+	.female {
 		@apply border-pink-800 bg-pink-800/20 text-pink-200;
 	}
 
-	.blue {
+	.male {
 		@apply border-blue-800 bg-blue-800/20 text-blue-200;
 	}
 
-	.violet {
+	.trans {
 		@apply border-violet-800 bg-violet-800/20 text-violet-200;
 	}
 
-	.amber {
+	.mixed {
 		@apply border-amber-800 bg-amber-800/20 text-amber-200;
 	}
 
-	.sky {
+	.location {
 		@apply border-sky-800 bg-sky-800/20 text-sky-200;
 	}
-
-	.zinc {
-		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
-	}
 </style>