From a650238d96af7f84be9b19fd995d9765c4895c99 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 26 Feb 2025 16:23:47 +0100
Subject: 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.
---
 frontend/src/lib/pills/Pill.svelte | 49 ++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 20 deletions(-)

(limited to 'frontend/src/lib/pills/Pill.svelte')

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>
-- 
cgit v1.2.3-2-gb3c3

