feat(feed): adding image viewer for expanding images found in the feed instead of displaying in a new tab and taking the viewer away from the application

src/components/ImageViewer.vue

@@ -0,0 +1,51 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
+        @click="close"
+      >
+        <button
+          class="absolute top-4 right-4 text-white text-2xl p-2 rounded-full hover:bg-white/10"
+          @click="close"
+        >
+          <fa icon="xmark" />
+        </button>
+
+        <img
+          :src="imageUrl"
+          class="max-h-screen max-w-screen-md w-full object-contain p-4"
+          @click.stop
+          alt="expanded shared content"
+        />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-facing-decorator";
+
+@Component
+export default class ImageViewer extends Vue {
+  @Prop() imageUrl!: string;
+  @Prop() isOpen!: boolean;
+
+  close() {
+    this.$emit("update:isOpen", false);
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>