path: root/frontend/src/lib/tabs/ArchiveDetails.svelte

<script lang="ts">
	import type { FullArchiveFragment } from '$gql/graphql';
	import { formatListSize, joinText } from '$lib/Utils';
	import ComicCard from '$lib/components/ComicCard.svelte';
	import { formatDistance, formatISO9075 } from 'date-fns';
	import { filesize } from 'filesize';
	import Header from './DetailsHeader.svelte';
	import Section from './DetailsSection.svelte';

	let { archive }: { archive: FullArchiveFragment } = $props();

	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}
					<ComicCard compact {comic} />
				{/each}
			</div>
		</div>
	{/if}
</div>