feat: finish upload image

apps/app/components/atoms/CreatorsImageCard.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-defineProps<{
+import { useClipboard } from "@vueuse/core";
+const { fileUrl = "" } = defineProps<{
   fileUrl: string;
 }>();
+
+const source = ref(fileUrl);
+const { copy, copied } = useClipboard({ source });
 </script>
 
 <template>
@@ -33,8 +37,11 @@ defineProps<{
 
     <div
       class="absolute z-10 top-0 left-0 w-full h-full items-center justify-center bg-black/50 cursor-pointer hidden group-hover:flex"
+      @click="copy()"
     >
-      <span class="font-semibold text-sm text-white"> Copiar url </span>
+      <span class="font-semibold text-sm text-white">
+        {{ copied ? "Copiado!" : "Copiar url" }}
+      </span>
     </div>
     <div class="aspect-video w-full overflow-hidden bg-zinc-100">
       <nuxt-img

apps/app/components/molecules/TopBar.vue

@@ -53,7 +53,10 @@ const defaultAsideStore = useDefaultAsideStore();
               <NuxtLink to="/profile">
                 <DropdownItem icon="circle-user" name="Perfil" />
               </NuxtLink>
-              <NuxtLink to="/creators/images">
+              <NuxtLink
+                to="/creators/images"
+                v-if="userStore.user?.publicMetadata?.isCreator"
+              >
                 <DropdownItem icon="star" name="Creators" />
               </NuxtLink>
               <NuxtLink to="/sign-out">

apps/app/pages/creators/images.vue

@@ -8,6 +8,12 @@ onMounted(async () => {
   loading.value = false;
 });
 
+function getSizePercentage(bytes: number) {
+  const tenGigabytes = 10737418240;
+
+  return Number((bytes * 100) / tenGigabytes).toFixed(2);
+}
+
 function onInput(event: Event) {
   const allFiles = (event.target as HTMLInputElement).files;
 
@@ -20,11 +26,11 @@ function onInput(event: Event) {
 }
 
 async function uploadFile(file: File) {
+  loading.value = true;
   const response = await creatorsStore.signUrl(file.type);
-  console.log(response);
-
   await uploadStore.uploadFileOnUrl(file, response.signedUrl.url);
   await creatorsStore.addImage(response.signedUrl.fileName);
+  loading.value = false;
 }
 </script>
 
@@ -55,18 +61,21 @@ async function uploadFile(file: File) {
       <div class="space-y-[4px] w-full max-w-[240px] pt-2">
         <div class="rounded-full bg-zinc-200 h-[4px]">
           <div
-            class="w-full max-w-[60%] h-full rounded-full bg-emerald-500"
+            class="w-full h-full rounded-full bg-emerald-500"
+            :style="`max-width: ${getSizePercentage(
+              creatorsStore.filesSize
+            )}%;`"
           ></div>
         </div>
         <div class="flex text-zinc-500 text-sm">
           <div class="flex-1">
             Usado:
             <span class="text-zinc-950 font-medium">{{
-              creatorsStore.filesSize
+              $filters.bytesToSize(creatorsStore.filesSize)
             }}</span>
-            de 10GB
+            de 10 GB
           </div>
-          <div>50%</div>
+          <div>{{ getSizePercentage(creatorsStore.filesSize) }} %</div>
         </div>
       </div>
     </div>
@@ -84,7 +93,7 @@ async function uploadFile(file: File) {
       v-else
     >
       <CreatorsImageCard
-        v-for="fileName in creatorsStore.images"
+        v-for="fileName in creatorsStore.images.reverse()"
         :key="fileName"
         :fileUrl="`https://menthor-content.s3.sa-east-1.amazonaws.com/${fileName}`"
       />

apps/app/plugins/filters.ts

@@ -12,6 +12,16 @@ export default defineNuxtPlugin((nuxtApp) => {
       };
       return levels[value];
     },
+    bytesToSize(bytes: number): string {
+      const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+      if (bytes === 0) return "n/a";
+      const i = Math.min(
+        Math.floor(Math.log(bytes) / Math.log(1024)),
+        sizes.length - 1
+      );
+      if (i === 0) return `${bytes} ${sizes[i]}`;
+      return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
+    },
   };
 
   app.config.globalProperties.$filters = filters;

apps/app/stores/clerk/user.ts

@@ -11,7 +11,10 @@ export type user = {
   firstName: string;
   lastName: string;
   username: string;
-  publicMetadata: Record<"badges", any>;
+  publicMetadata: {
+    badges: string;
+    isCreator: boolean;
+  };
 };
 
 export const useUserStore = defineStore("user", {

apps/app/types/index.d.ts

@@ -20,6 +20,7 @@ declare module "vue" {
     $clerk: Clerk;
     $filters: {
       level: Function;
+      bytesToSize: Function;
     };
   }
 }