✨ Gallery one item view

pages/gallery/index.vue

@@ -6,34 +6,8 @@
     </div>
 
     <div class="album">
-      <v-card v-for="item in items" class="album-item mb-3">
-        <v-img v-if="item.mimetype.split('/')[0] == 'image'" :src="getAttachmentUrl(item.id)" class="w-full h-full"
-               cover />
-        <video v-else-if="item.mimetype.split('/')[0] == 'video'" :src="getAttachmentUrl(item.id)" class="w-full h-full"
-               controls />
-        <v-sheet v-else color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">
-          <v-row class="fill-height" align="center" justify="center">
-            <v-col class="text-center">
-              <h1 class="text-xl font-bold text-white">
-                {{ item.alt }}
-              </h1>
-              <p class="text-md text-white">{{ item.mimetype }}</p>
-
-              <p class="text-sm text-white mt-3">Unable to preview, you can open it via other ways.</p>
-
-              <div class="flex justify-center mt-3">
-                <v-btn
-                  variant="text"
-                  color="white"
-                  prepend-icon="mdi-launch"
-                  text="Open in browser"
-                  :href="getAttachmentUrl(item.id)"
-                  target="_blank"
-                />
-              </div>
-            </v-col>
-          </v-row>
-        </v-sheet>
+      <v-card v-for="item in items" class="album-item mb-3" :to="`/gallery/${item.id}`">
+        <attachment-renderer :item="item" />
       </v-card>
 
       <div class="flex p-5 justify-center items-center">