feat: implement screenshot gallery

src/components/Screenshots.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
+
+defineProps<{
+  images: string[];
+}>();
+</script>
+
+<template>
+  <TabGroup as="div" class="flex flex-col-reverse">
+    <!-- Image selector -->
+    <div class="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
+      <TabList class="grid grid-cols-4 gap-6">
+        <Tab
+          v-for="(screenshot, index) in $props.images"
+          :key="screenshot"
+          v-slot="{ selected }"
+          class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
+        >
+          <span class="sr-only">Screenshot {{ index }}</span>
+
+          <span class="absolute inset-0 overflow-hidden rounded-md">
+            <img
+              :src="screenshot"
+              alt=""
+              class="h-full w-full object-cover object-center"
+            />
+          </span>
+
+          <span
+            :class="[
+              selected ? 'ring-indigo-500' : 'ring-transparent',
+              'pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2',
+            ]"
+            aria-hidden="true"
+          />
+        </Tab>
+      </TabList>
+    </div>
+
+    <TabPanels class="aspect-h-1 aspect-w-1 w-full">
+      <TabPanel v-for="image in $props.images" :key="image">
+        <img
+          :src="image"
+          :alt="`Screenshot {i}`"
+          class="h-full w-full object-cover object-center sm:rounded-lg"
+        />
+      </TabPanel>
+    </TabPanels>
+  </TabGroup>
+</template>

src/views/Comments.vue

@@ -23,21 +23,11 @@ const activity = computed(() =>
       :key="comment._id"
       class="relative flex gap-x-4"
     >
-      <div
-        :class="[
-          activityItemIdx === activity.length - 1 ? 'h-6' : '-bottom-6',
-          'absolute left-0 top-0 flex w-6 justify-center',
-        ]"
-      >
-        <div class="w-px bg-gray-200" />
-      </div>
-
-      <div class="relative mt-3 h-6 w-6 flex-none rounded-full bg-gray-50" />
-      <!-- <img
-        :src="comment.person.imageUrl"
+      <img
+        :src="comment.userId"
         alt=""
         class="relative mt-3 h-6 w-6 flex-none rounded-full bg-gray-50"
-      /> -->
+      />
 
       <div class="flex-auto rounded-md p-3 ring-1 ring-inset ring-gray-200">
         <div class="flex justify-between gap-x-4">

src/views/NewProject.vue

@@ -66,7 +66,7 @@ const handleLogoUpload = (event: Event) => {
   logo.value = files[0];
 };
 const uploadLogo = async (uuid: string) => {
-  if (!logo.value) return;
+  if (!logo.value || !uuid) return;
 
   const uploadRef = storageRef(storage, `projects/${uuid}/logo.png`);
   await uploadBytes(uploadRef, logo.value);
@@ -81,14 +81,14 @@ const handleScreenshotUpload = (event: Event) => {
   screenshots.value = Array.from(files);
 };
 
-const uploadScreenshots = async () => {
-  if (!screenshots.value) return;
+const uploadScreenshots = async (uuid: string) => {
+  if (!screenshots.value || !uuid) return;
 
   await Promise.all(
     screenshots.value.map(async (screenshot, index) => {
       const uploadRef = storageRef(
         storage,
-        `projects/8uFvujhBpyl7ef7bi8I2/screenshots/${index}.png`,
+        `projects/${uuid}/screenshots/${index}.png`,
       );
       await uploadBytes(uploadRef, screenshot);
     }),
@@ -107,7 +107,7 @@ const onSubmit = handleSubmit(
     // handle form submission here
     projectStore.addProject(values, user.value.uid).then(async (uid) => {
       await uploadLogo(uid);
-      await uploadScreenshots();
+      await uploadScreenshots(uid);
 
       resetForm();
       router.push("/");

src/views/Project.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import {
+  getDownloadURL,
+  getStorage,
+  listAll,
+  ref as storageRef,
+} from "firebase/storage";
+import { computed, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 
+import Screenshots from "@/components/Screenshots.vue";
 import { useProjectStore } from "@/projects";
 
 import Comments from "./Comments.vue";
@@ -13,6 +20,35 @@ const route = useRoute();
 const project = computed(() =>
   store.projects.find((project) => project._id === route.params.id),
 );
+
+const storage = getStorage();
+
+const images = ref<string[]>([]);
+
+onMounted(() => {
+  console.log("path", `projects/${project.value?._id}/screenshots`);
+  // Create a reference under which you want to list
+  const listRef = storageRef(
+    storage,
+    `projects/${project.value?._id}/screenshots`,
+  );
+  console.log(listRef);
+
+  // Find all the prefixes and items.
+  listAll(listRef)
+    .then((res) => {
+      res.items.forEach((itemRef) => {
+        console.log("itemRef", itemRef);
+        getDownloadURL(itemRef).then((url) => {
+          console.log("url", url);
+          images.value.push(url);
+        });
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});
 </script>
 
 <template>
@@ -25,6 +61,8 @@ const project = computed(() =>
       <UpvoteButton v-if="project" :project="project" />
     </div>
 
+    <Screenshots :images="images" />
+
     <p class="mt-1 text-sm text-gray-500">
       {{ project?.description }}
     </p>
@@ -58,7 +96,9 @@ const project = computed(() =>
               :key="link"
               class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6"
             >
-              {{ link }}
+              <a :href="link" class="text-indigo-600 hover:text-indigo-500">{{
+                link
+              }}</a>
             </li>
           </ul>
         </dd>