From e2ea60e3d3b13e0660d9f76daf2e549563bc38d6 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 20 Feb 2025 19:33:55 +0100
Subject: frontend: Introduce ComicCard and ArchiveCard

Instead of repeatedly supplying Card content in all the places it is
required, it makes more sense to create dedicated ComicCard and
ArchiveCard components. These wrap around Card itself and can be used in
a more straightforward and consistent fashion.

Whilst we are here, simplify and streamline the display of Comic and
Archive metadata by introducing a Card footer. The footer is used for
information on page count, release date, and archive size.
---
 frontend/src/lib/pills/ComicPills.svelte | 37 --------------------------------
 frontend/src/lib/pills/FooterPill.svelte | 15 +++++++++++++
 2 files changed, 15 insertions(+), 37 deletions(-)
 delete mode 100644 frontend/src/lib/pills/ComicPills.svelte
 create mode 100644 frontend/src/lib/pills/FooterPill.svelte

(limited to 'frontend/src/lib/pills')

diff --git a/frontend/src/lib/pills/ComicPills.svelte b/frontend/src/lib/pills/ComicPills.svelte
deleted file mode 100644
index 45c42fd..0000000
--- a/frontend/src/lib/pills/ComicPills.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-	import type { ComicFragment } from '$gql/graphql';
-	import AssociationPill from '$lib/pills/AssociationPill.svelte';
-	import TagPill from '$lib/pills/TagPill.svelte';
-
-	let { comic }: { comic: ComicFragment } = $props();
-</script>
-
-<div class="flex flex-col gap-1">
-	{#if comic.artists.length || comic.circles.length}
-		<div class="flex flex-wrap gap-1">
-			{#each comic.artists as { name } (name)}
-				<AssociationPill {name} type="artist" />
-			{/each}
-			{#each comic.circles as { name } (name)}
-				<AssociationPill {name} type="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" />
-			{/each}
-			{#each comic.characters as { name } (name)}
-				<AssociationPill {name} type="character" />
-			{/each}
-		</div>
-	{/if}
-	{#if comic.tags.length}
-		<div class="flex flex-wrap gap-1">
-			{#each comic.tags as { name, description } (name)}
-				<TagPill {name} {description} />
-			{/each}
-		</div>
-	{/if}
-</div>
diff --git a/frontend/src/lib/pills/FooterPill.svelte b/frontend/src/lib/pills/FooterPill.svelte
new file mode 100644
index 0000000..3da1811
--- /dev/null
+++ b/frontend/src/lib/pills/FooterPill.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		text: string;
+		icon?: Snippet;
+	}
+
+	let { text, icon }: Props = $props();
+</script>
+
+<div class="flex items-center rounded-sm p-0.5 text-zinc-300">
+	{@render icon?.()}
+	<span>{text}</span>
+</div>
-- 
cgit v1.2.3-2-gb3c3