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/components/ComicCard.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'frontend/src/lib/components/ComicCard.svelte')

diff --git a/frontend/src/lib/components/ComicCard.svelte b/frontend/src/lib/components/ComicCard.svelte
index cb73e97..1a648b2 100644
--- a/frontend/src/lib/components/ComicCard.svelte
+++ b/frontend/src/lib/components/ComicCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComicFragment } from '$gql/graphql';
-	import AssociationPill from '$lib/pills/AssociationPill.svelte';
 	import FooterPill from '$lib/pills/FooterPill.svelte';
+	import Pill from '$lib/pills/Pill.svelte';
 	import TagPill from '$lib/pills/TagPill.svelte';
 	import { type Snippet } from 'svelte';
 	import Card from './Card.svelte';
@@ -30,20 +30,20 @@
 		{#if comic.artists.length || comic.circles.length}
 			<div class="flex flex-wrap gap-1">
 				{#each comic.artists as { name } (name)}
-					<AssociationPill {name} type="artist" />
+					<Pill {name} style="artist" />
 				{/each}
 				{#each comic.circles as { name } (name)}
-					<AssociationPill {name} type="circle" />
+					<Pill {name} style="circle" />
 				{/each}
 			</div>
 		{/if}
 		{#if comic.characters.length || comic.worlds.length}
 			<div class="flex flex-wrap gap-1">
 				{#each comic.worlds as { name } (name)}
-					<AssociationPill {name} type="world" />
+					<Pill {name} style="world" />
 				{/each}
 				{#each comic.characters as { name } (name)}
-					<AssociationPill {name} type="character" />
+					<Pill {name} style="character" />
 				{/each}
 			</div>
 		{/if}
-- 
cgit v1.2.3-2-gb3c3