frontend/src/lib/pills/ComicPills.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<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>