path: root/frontend/src/lib/pills/ComicPills.svelte

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