basic text editor

frontend/components/viewers/ImageViewer.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useImageViewer } from '~/stores/viewers';
+
+const imageViewer = useImageViewer();
+
+function onOpenUpdate(state: boolean) {
+    if (!state) {
+        imageViewer.close();
+    }
+}
+</script>
+
+<template>
+    <Dialog :open="imageViewer.src != null" @update:open="onOpenUpdate">
+        <DialogTrigger>
+            <slot />
+        </DialogTrigger>
+        <DialogContent
+            class="w-full overflow-hidden p-0 sm:!max-h-[90vh] sm:!max-w-[90vw]"
+        >
+            <img
+                v-if="imageViewer.src"
+                class="h-full w-full overflow-hidden !object-contain"
+                :src="imageViewer.src"
+            />
+        </DialogContent>
+    </Dialog>
+</template>