feat(pets): missing pets section (#4)

* feat(pets): missing pets section * fix(pets): warp div in if to remove chance of empty div
SkyCryptWebsite · Jun 17, 2024 · 200dd01 · 200dd01
1 parent 3f3db59
commit 200dd01
Showing 1 changed file with 39 additions and 16 deletions.
diff --git a/src/lib/sections/stats/Pets.svelte b/src/lib/sections/stats/Pets.svelte
@@ -79,20 +79,43 @@
     {/each}
   </Items>
 
-  <Collapsible.Root>
-    <Collapsible.Trigger>
-      <h4 class="text-xl capitalize text-text">Show More Pets</h4>
-      <br />
-    </Collapsible.Trigger>
-    <Collapsible.Content>
-      <Items>
-        {#each otherPets as pet}
-          <div>
-            <Item piece={pet} />
-            <p class="mt-2 text-center">LVL {pet.level.level}</p>
-          </div>
-        {/each}
-      </Items>
-    </Collapsible.Content>
-  </Collapsible.Root>
+  {#if otherPets.length > 0 || pets.missing.length > 0}
+    <div>
+      {#if otherPets.length > 0}
+        <Collapsible.Root>
+          <Collapsible.Trigger>
+            <h4 class="text-xl capitalize text-text">Show More Pets</h4>
+            <br />
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <Items>
+              {#each otherPets as pet}
+                <div>
+                  <Item piece={pet} />
+                  <p class="mt-2 text-center">LVL {pet.level.level}</p>
+                </div>
+              {/each}
+            </Items>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      {/if}
+      {#if pets.missing.length > 0}
+        <Collapsible.Root>
+          <Collapsible.Trigger>
+            <h4 class="text-xl capitalize text-text">Missing Pets</h4>
+            <br />
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <Items>
+              {#each pets.missing as pet}
+                <div>
+                  <Item piece={pet} />
+                </div>
+              {/each}
+            </Items>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      {/if}
+    </div>
+  {/if}
 </Items>