path: root/frontend/src/lib/reader/ReaderPage.svelte

<script lang="ts">
	import type { PageFragment } from '$gql/graphql';
	import { src } from '$lib/Utils';
	import type { MouseEventHandler } from 'svelte/elements';

	interface Props {
		page: PageFragment;
		onclick: MouseEventHandler<HTMLDivElement>;
	}

	let { page, onclick }: Props = $props();
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="flex w-full" {onclick}>
	<img
		class="h-auto w-auto object-contain"
		width={page.image.width}
		height={page.image.height}
		src={src(page.image, 'full')}
		alt={page.path}
	/>
</div>

<style>
	div {
		justify-content: var(--justify);
	}
</style>