blob: c9d283ba859239258e4e4096f622adac25d151aa (
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
|
<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>
|
