1 files changed, 75 insertions, 0 deletions
diff --git a/frontend/src/lib/components/ComicCard.svelte b/frontend/src/lib/components/ComicCard.svelte
new file mode 100644
index 0000000..cb73e97
--- /dev/null
+++ b/frontend/src/lib/components/ComicCard.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { ComicFragment } from '$gql/graphql';
+	import AssociationPill from '$lib/pills/AssociationPill.svelte';
+	import FooterPill from '$lib/pills/FooterPill.svelte';
+	import TagPill from '$lib/pills/TagPill.svelte';
+	import { type Snippet } from 'svelte';
+	import Card from './Card.svelte';
+
+	interface Props {
+		comic: ComicFragment;
+		overlay?: Snippet;
+		compact?: boolean;
+		coverOnly?: boolean;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let { comic, overlay, compact, coverOnly, onclick }: Props = $props();
+
+	let details = $derived({
+		title: comic.title,
+		subtitle: comic.originalTitle,
+		favourite: comic.favourite,
+		cover: comic.cover
+	});
+	let href = $derived(`/comics/${comic.id.toString()}`);
+</script>
+
+<Card {details} {href} {compact} {onclick} {overlay} {coverOnly}>
+	<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>
+	{#snippet footer()}
+		<div class="flex flex-wrap gap-1">
+			<FooterPill text={`${comic.pageCount} pages`}>
+				{#snippet icon()}
+					<span class="icon-[material-symbols--description] mr-0.5 text-sm"></span>
+				{/snippet}
+			</FooterPill>
+			<div class="flex grow"></div>
+			{#if comic.date}
+				<FooterPill text={comic.date}>
+					{#snippet icon()}
+						<span class="icon-[material-symbols--calendar-today] mr-0.5 text-sm"></span>
+					{/snippet}
+				</FooterPill>
+			{/if}
+		</div>
+	{/snippet}
+</Card>