diff options
| author | Wolfgang Müller | 2025-02-20 19:33:55 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2025-02-21 12:12:48 +0100 |
| commit | e2ea60e3d3b13e0660d9f76daf2e549563bc38d6 (patch) | |
| tree | e71f78ce198ed7f986f72da3a6caa2cfe5a9e956 /frontend/src/lib/components/ArchiveCard.svelte | |
| parent | 89f71d6d0029b66548acde9c3fc27201482ed2b3 (diff) | |
| download | hircine-e2ea60e3d3b13e0660d9f76daf2e549563bc38d6.tar.gz | |
frontend: Introduce ComicCard and ArchiveCard
Instead of repeatedly supplying Card content in all the places it is
required, it makes more sense to create dedicated ComicCard and
ArchiveCard components. These wrap around Card itself and can be used in
a more straightforward and consistent fashion.
Whilst we are here, simplify and streamline the display of Comic and
Archive metadata by introducing a Card footer. The footer is used for
information on page count, release date, and archive size.
Diffstat (limited to 'frontend/src/lib/components/ArchiveCard.svelte')
| -rw-r--r-- | frontend/src/lib/components/ArchiveCard.svelte | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/frontend/src/lib/components/ArchiveCard.svelte b/frontend/src/lib/components/ArchiveCard.svelte new file mode 100644 index 0000000..c9d283b --- /dev/null +++ b/frontend/src/lib/components/ArchiveCard.svelte @@ -0,0 +1,39 @@ +<script lang="ts"> + import type { ArchiveFragment } from '$gql/graphql'; + import FooterPill from '$lib/pills/FooterPill.svelte'; + import { filesize } from 'filesize'; + import { type Snippet } from 'svelte'; + import Card from './Card.svelte'; + + interface Props { + archive: ArchiveFragment; + overlay?: Snippet; + onclick?: (event: MouseEvent) => void; + } + + let { archive, overlay, onclick }: Props = $props(); + + let details = $derived({ + title: archive.name, + cover: archive.cover + }); + let href = $derived(`/archives/${archive.id.toString()}`); +</script> + +<Card {details} {href} {onclick} {overlay}> + {#snippet footer()} + <div class="flex flex-wrap gap-1"> + <FooterPill text={`${archive.pageCount} pages`}> + {#snippet icon()} + <span class="icon-[material-symbols--description] mr-0.5 text-sm"></span> + {/snippet} + </FooterPill> + <div class="flex grow"></div> + <FooterPill text={filesize(archive.size, { base: 2 })}> + {#snippet icon()} + <span class="icon-[material-symbols--hard-drive] mr-0.5 text-sm"></span> + {/snippet} + </FooterPill> + </div> + {/snippet} +</Card> |