blob: cb73e97351fe50250d3ee123cbd66b6db4c7088b (
plain) (
blame)
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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>
|
