feat: unify image

components/competition/form.vue

@@ -304,7 +304,7 @@ function getTmpURL(file: File) {
         <div v-viewer class="flex flex-wrap gap-2">
           <div v-for="attachment in form.attachments" :key="attachment.id">
             <div class="flex items-center gap-2">
-              <img :src="attachment.url" :alt="attachment.name" class="w-12 h-12 object-cover cursor-pointer">
+              <SubmissionImg :src="attachment.url" :alt="attachment.name" />
               <Icon name="mdi:delete" size="24" class="cursor-pointer text-gray-500" @click="removeAttachment(attachment)" />
             </div>
             <div class="text-xs text-gray-500 mt-1">
@@ -313,7 +313,7 @@ function getTmpURL(file: File) {
           </div>
           <div v-for="file in uploadingAttachments" :key="file.name">
             <div class="flex items-center gap-2">
-              <img :src="getTmpURL(file)" :alt="file.name" class="w-12 h-12 object-cover cursor-pointer">
+              <SubmissionImg :src="getTmpURL(file)" :alt="file.name" />
               <Spinner class="w-4 h-4 text-green-500 border-[3px]" />
             </div>
             <div class="text-xs text-gray-500 mt-1">

components/submission/attachments.vue

@@ -6,6 +6,6 @@ defineProps<{
 
 <template>
   <div v-if="attachments && attachments.length > 0" v-viewer class="flex gap-1">
-    <img v-for="{ id, url, name } in attachments" :key="id" :src="url" :alt="name" class="w-12 h-12 border border-indigo-500 cursor-pointer">
+    <SubmissionImg v-for="{ id, url, name } in attachments" :key="id" :src="url" :name="name" />
   </div>
 </template>

components/submission/img.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{
+  src: string
+  name: string
+}>()
+</script>
+
+<template>
+  <img :src="src" :alt="name" class="w-16 h-16 border-2 border-indigo-500 object-cover cursor-pointer">
+</template>