flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { fade } from 'svelte/transition';
3
4 let { open = $bindable(false), src = '' }: { open: boolean; src: string } = $props();
5
6 function close() {
7 open = false;
8 }
9
10 function onkeydown(e: KeyboardEvent) {
11 if (e.key === 'Escape' && open) {
12 close();
13 }
14 }
15</script>
16
17<svelte:window {onkeydown} />
18
19{#if open}
20 <!-- svelte-ignore a11y_interactive_supports_focus -->
21 <div
22 class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
23 transition:fade={{ duration: 150 }}
24 onclick={close}
25 onkeydown={(e) => {
26 if (e.key === 'Escape') close();
27 }}
28 role="dialog"
29 aria-modal="true"
30 >
31 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
32 <img
33 {src}
34 alt=""
35 class="max-h-[90vh] max-w-[90vw] object-contain"
36 onclick={(e) => e.stopPropagation()}
37 onkeydown={(e) => e.stopPropagation()}
38 />
39 </div>
40{/if}