feat: shows not available overlay on disabled badges

menthorlabs · Oct 6, 2023 · eadadc9 · eadadc9
1 parent a1552b4
commit eadadc9
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/apps/app/components/atoms/AchievementCard.vue b/apps/app/components/atoms/AchievementCard.vue
@@ -47,7 +47,17 @@ const badges: Record<availableBadges, badgeState> = {
 </script>
 
 <template>
-  <div class="group rounded-md p-4 text-sm">
+  <div
+    v-if="disabled"
+    class="w-full h-full min-h-[190px] flex items-center justify-center"
+  >
+    <p
+      class="px-[10px] py-[2px] bg-zinc-200 font-medium text-zinc-900 text-xs rounded-3xl"
+    >
+      Não disponível
+    </p>
+  </div>
+  <div class="group rounded-md p-4 text-sm" v-if="!disabled">
     <div class="mb-3 aspect-square w-full rounded relative">
       <div
         v-if="!disabled"