Initial commit0.1.0

1 files changed, 50 insertions, 0 deletions

diff --git a/frontend/src/lib/tabs/ArchiveDetails.svelte b/frontend/src/lib/tabs/ArchiveDetails.svelte
new file mode 100644
index 0000000..9554557
--- /dev/null
+++ b/frontend/src/lib/tabs/ArchiveDetails.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { FullArchiveFragment } from '$gql/graphql';
+	import { formatListSize, joinText } from '$lib/Utils';
+	import Card, { comicCard } from '$lib/components/Card.svelte';
+	import ComicPills from '$lib/pills/ComicPills.svelte';
+	import { formatDistance, formatISO9075 } from 'date-fns';
+	import { filesize } from 'filesize';
+	import Header from './DetailsHeader.svelte';
+	import Section from './DetailsSection.svelte';
+
+	export let archive: FullArchiveFragment;
+
+	const now = Date.now();
+	const modifiedDate = new Date(archive.mtime);
+	const createdDate = new Date(archive.createdAt);
+
+	const title = joinText(['Archive', formatListSize('image', archive.pageCount)]);
+</script>
+
+<div class="flex flex-col gap-4 text-sm">
+	<Header {title} />
+	<div class="grid grid-cols-3 gap-4">
+		<Section title="Size">
+			<span>{filesize(archive.size, { base: 2 })}</span>
+		</Section>
+		<Section title="Created">
+			<span title={formatISO9075(createdDate)}>
+				{formatDistance(createdDate, now, { addSuffix: true })}
+			</span>
+		</Section>
+		<Section title="File last modified">
+			<span title={formatISO9075(modifiedDate)}>
+				{formatDistance(modifiedDate, now, { addSuffix: true })}
+			</span>
+		</Section>
+	</div>
+
+	{#if archive.comics.length > 0}
+		<div class="flex flex-col gap-1">
+			<h2 class="text-base font-medium">Comics</h2>
+			<div class="flex shrink-0 flex-col gap-4">
+				{#each archive.comics as comic}
+					<Card compact {...comicCard(comic)}>
+						<ComicPills {comic} />
+					</Card>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>