refactor: add new components

src/components/ShowAttachent.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+
+const props = withDefaults(
+  defineProps<{ url: string; file: File | undefined }>(),
+  {},
+);
+
+const scale = ref(1);
+const page = ref(1);
+const { pdf, pages } = usePDF(computed(() => props.url));
+</script>
+
+<template>
+  <div class="col full-height column no-wrap">
+    <div
+      class="surface-0 bordered row items-center justify-evenly q-pa-sm no-wrap"
+      style="height: 50px"
+    >
+      <q-btn
+        @click="page = page > 1 ? page - 1 : page"
+        class="btn-next"
+        icon="mdi-chevron-left"
+        unelevated
+        dense
+        id="btn-prev-page-top"
+      />
+
+      <div class="ellipsis">Page {{ page }} of {{ pages }}</div>
+
+      <q-btn
+        @click="scale = scale > 0.25 ? scale - 0.25 : scale"
+        flat
+        dense
+        round
+        size="12px"
+        icon="mdi-magnify-minus-outline"
+        class="app-text-dark"
+      >
+        <q-tooltip>{{ $t('zoomOut') }}</q-tooltip>
+      </q-btn>
+      <div>{{ scale * 100 }}%</div>
+
+      <q-btn
+        flat
+        dense
+        round
+        size="12px"
+        class="app-text-dark"
+        icon="mdi-magnify-plus-outline"
+        @click="scale = scale < 2 ? scale + 0.25 : scale"
+      >
+        <q-tooltip>{{ $t('general.zoomIn') }}</q-tooltip>
+      </q-btn>
+
+      <q-btn
+        @click="page = page < pages ? page + 1 : page"
+        class="btn-next"
+        icon="mdi-chevron-right"
+        unelevated
+        dense
+        id="btn-prev-page-top"
+      />
+    </div>
+
+    <div
+      class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
+    >
+      <VuePDF
+        v-if="
+          url?.split('?').at(0)?.endsWith('.pdf') ||
+          file?.type === 'application/pdf'
+        "
+        class="q-py-md"
+        :pdf="pdf"
+        :page="page"
+        :scale="scale"
+      />
+
+      <q-img v-else class="q-py-md full-width" :src="url" />
+    </div>
+  </div>
+</template>