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

	export let page: PageFragment;
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex grow" on:click>
	<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>