feat: add creators image upload screen

menthorlabs · Nov 9, 2023 · 1c0dd03 · 1c0dd03
1 parent fb8af5f
commit 1c0dd03
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 2 deletions.
diff --git a/apps/app/components/molecules/LeftMenuCreators.vue b/apps/app/components/molecules/LeftMenuCreators.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="w-full flex-1 p-3">
+    <div class="text-zinc-700 font-medium pl-4 py-[10px] text-sm">
+      Criação de conteúdo
+    </div>
+    <nuxt-link
+      to="/creators/images"
+      class="group"
+      exact-active-class="is-active"
+    >
+      <LeftMenuItem
+        icon="image"
+        text="Imagens"
+        class="group-[.is-active]:text-zinc-950 group-[.is-active]:bg-zinc-100"
+      />
+    </nuxt-link>
+  </div>
+</template>
diff --git a/apps/app/components/molecules/TopBar.vue b/apps/app/components/molecules/TopBar.vue
@@ -53,6 +53,9 @@ const defaultAsideStore = useDefaultAsideStore();
               <NuxtLink to="/profile">
                 <DropdownItem icon="circle-user" name="Perfil" />
               </NuxtLink>
+              <NuxtLink to="/creators/images">
+                <DropdownItem icon="star" name="Creators" />
+              </NuxtLink>
               <NuxtLink to="/sign-out">
                 <DropdownItem icon="arrow-right-from-bracket" name="Sair" />
               </NuxtLink>

diff --git a/apps/app/components/organisms/DefaultAside.vue b/apps/app/components/organisms/DefaultAside.vue
@@ -19,6 +19,10 @@ const isLesson = computed(() => {
   return !!route.meta?.lesson;
 });
 
+const isCreators = computed(() => {
+  return route.path.includes("/creators");
+});
+
 watch(isLesson, async () => {
   refresh();
 });
@@ -66,7 +70,12 @@ watch(isLesson, async () => {
         </div>
       </Transition>
       <Transition name="slide-fade-reverse">
-        <div v-if="!isLesson">
+        <div v-if="!isLesson && isCreators">
+          <LeftMenuCreators />
+        </div>
+      </Transition>
+      <Transition name="slide-fade-reverse">
+        <div v-if="!isLesson && !isCreators">
           <LeftMenuDefault />
         </div>
       </Transition>

diff --git a/apps/app/pages/creators/images.vue b/apps/app/pages/creators/images.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="container pt-4">
+    <h1 class="text-4xl font-extrabold mb-4">Suas imagens</h1>
+    <div class="flex items-center gap-4 mb-8">
+      <MButton
+        variant="outline"
+        text="Fazer upload"
+        icon-left="cloud-arrow-up"
+      />
+      <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"
+          ></div>
+        </div>
+        <div class="flex text-zinc-500 text-sm">
+          <div class="flex-1">
+            Usado: <span class="text-zinc-950 font-medium">5GB</span> de 10GB
+          </div>
+          <div>50%</div>
+        </div>
+      </div>
+    </div>
+    <div class="grid grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-1">
+      <div v-for="i in 16" :key="i">
+        <div class="aspect-video w-full overflow-hidden">
+          <nuxt-img
+            src="/app/midjourney/backgrounds/login.png"
+            :quality="85"
+            format="webp"
+            width="250"
+            height="140"
+            alt="Roadmap"
+            class="h-full w-full object-cover object-center transition-all group-hover:scale-110"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/app/pages/index.vue b/apps/app/pages/index.vue
@@ -30,7 +30,7 @@ useSeoMeta({
     </div>
     <h2 class="mb-4 text-lg font-bold">Recomendados para você</h2> -->
     <div
-      class="mb-6 grid grid-cols-[repeat(auto-fill,_minmax(160px,_1fr))] sm:grid-cols-[repeat(auto-fill,_minmax(180px,_1fr))]"
+      class="mb-6 grid grid-cols-[repeat(auto-fill,_minmax(160px,_1fr))] sm:grid-cols-[repeat(auto-fill,_minmax(180px,_1fr))] gap-4 sm:gap-0"
     >
       <ContentNavigation v-slot="{ navigation }">
         <NuxtLink

diff --git a/apps/app/plugins/icons.ts b/apps/app/plugins/icons.ts
@@ -16,6 +16,7 @@ import {
   faHashtag,
   faStar,
   faLock,
+  faImage,
   faClipboard,
   faArrowRightFromBracket,
   faArrowUp,
@@ -54,6 +55,7 @@ library.add(
   faHashtag,
   faStar,
   faLock,
+  faImage,
   faClipboard,
   faArrowRightFromBracket,
   faArrowUp,