summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/tabs/ComicDetails.svelte
diff options
context:
space:
mode:
authorWolfgang Müller2024-03-05 18:08:09 +0100
committerWolfgang Müller2024-03-05 19:25:59 +0100
commitd1d654ebac2d51e3841675faeb56480e440f622f (patch)
tree56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/tabs/ComicDetails.svelte
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/tabs/ComicDetails.svelte')
-rw-r--r--frontend/src/lib/tabs/ComicDetails.svelte121
1 files changed, 121 insertions, 0 deletions
diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
new file mode 100644
index 0000000..0a131af
--- /dev/null
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+ import type { ComicFilter, FullComicFragment } from '$gql/graphql';
+ import { CategoryLabel, CensorshipLabel, LanguageLabel, RatingLabel } from '$lib/Enums';
+ import { href } from '$lib/Navigation';
+ import { formatListSize, joinText } from '$lib/Utils';
+ import AssociationPill from '$lib/pills/AssociationPill.svelte';
+ import TagPill from '$lib/pills/TagPill.svelte';
+ import { formatDistance, formatISO9075 } from 'date-fns';
+ import Header from './DetailsHeader.svelte';
+ import Section from './DetailsSection.svelte';
+
+ export let comic: FullComicFragment;
+
+ const now = Date.now();
+ const updatedDate = new Date(comic.updatedAt);
+ const createdDate = new Date(comic.createdAt);
+
+ const title = joinText([
+ comic.category ? CategoryLabel[comic.category] : '',
+ formatListSize('page', comic.pages.length)
+ ]);
+
+ function filterFor(filter: keyof ComicFilter, id: number | string) {
+ return href('comics', { filter: { include: { [filter]: { all: [id] } } } });
+ }
+</script>
+
+<div class="flex flex-col gap-4 text-sm">
+ <Header {title}>
+ {#if comic.url}
+ <a href={comic.url} target="_blank" rel="noreferrer" class="btn-slate" title="Open URL">
+ <span class="icon-base icon-[material-symbols--link]" />
+ </a>
+ {/if}
+ <a href={`/archives/${comic.archive.id}`} class="btn-slate" title="Go to Archive">
+ <span class="icon-base icon-[material-symbols--folder-zip]" />
+ </a>
+ </Header>
+
+ <div class="grid grid-cols-3 gap-4">
+ {#if comic.language}
+ <Section title="Language">
+ <span>{LanguageLabel[comic.language]}</span>
+ </Section>
+ {/if}
+ {#if comic.censorship}
+ <Section title="Censorship">
+ <span>{CensorshipLabel[comic.censorship]}</span>
+ </Section>
+ {/if}
+ {#if comic.rating}
+ <Section title="Rating">
+ <span>{RatingLabel[comic.rating]}</span>
+ </Section>
+ {/if}
+ </div>
+
+ <div class="grid grid-cols-3 gap-4">
+ {#if comic.date}
+ <Section title="Released">
+ <span>{formatISO9075(new Date(comic.date), { representation: 'date' })}</span>
+ </Section>
+ {/if}
+ <Section title="Created">
+ <span title={formatISO9075(createdDate)}>
+ {formatDistance(createdDate, now, { addSuffix: true })}
+ </span>
+ </Section>
+ <Section title="Updated">
+ <span title={formatISO9075(updatedDate)}>
+ {formatDistance(updatedDate, now, { addSuffix: true })}
+ </span>
+ </Section>
+ </div>
+
+ {#if comic.artists.length}
+ <Section title="Artists">
+ {#each comic.artists as { id, name } (id)}
+ <a href={filterFor('artists', id)}>
+ <AssociationPill {name} type="artist" />
+ </a>
+ {/each}
+ </Section>
+ {/if}
+ {#if comic.circles.length}
+ <Section title="Circles">
+ {#each comic.circles as { id, name } (id)}
+ <a href={filterFor('circles', id)}>
+ <AssociationPill {name} type="circle" />
+ </a>
+ {/each}
+ </Section>
+ {/if}
+ {#if comic.characters.length}
+ <Section title="Characters">
+ {#each comic.characters as { id, name } (id)}
+ <a href={filterFor('characters', id)}>
+ <AssociationPill {name} type="character" />
+ </a>
+ {/each}
+ </Section>
+ {/if}
+ {#if comic.worlds.length}
+ <Section title="Worlds">
+ {#each comic.worlds as { id, name } (id)}
+ <a href={filterFor('worlds', id)}>
+ <AssociationPill {name} type="world" />
+ </a>
+ {/each}
+ </Section>
+ {/if}
+ {#if comic.tags.length}
+ <Section title="Tags">
+ {#each comic.tags as { id, name, description } (id)}
+ <a href={filterFor('tags', id)}>
+ <TagPill {name} {description} />
+ </a>
+ {/each}
+ </Section>
+ {/if}
+</div>