From 54be2d0241a45f6dcfc84686f6cc17a449ae5722 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 22 Aug 2024 17:46:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improved=20by=20showing=20more?=
 =?UTF-8?q?=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/svgCard.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index cab7a1b..fdc9268 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -12,7 +12,8 @@
     Baseline,
     Sparkles,
     EllipsisIcon,
-    TagIcon
+    TagIcon,
+    XIcon
   } from 'lucide-svelte';
 
   // Components & styles:
@@ -48,6 +49,7 @@
 
   // Max Categories:
   let maxVisibleCategories = 1;
+  let moreTagsOptions = false;
 
   // Global Images Styles:
   const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
@@ -104,9 +106,16 @@
         {/each}
 
         {#if svgInfo.category.length > maxVisibleCategories}
-          <Popover.Root>
+          <Popover.Root
+            open={moreTagsOptions}
+            onOpenChange={(isOpen) => (moreTagsOptions = isOpen)}
+          >
             <Popover.Trigger class={badgeStyles} title="More Tags">
-              <EllipsisIcon size={15} strokeWidth={1.5} />
+              {#if moreTagsOptions}
+                <XIcon size={15} strokeWidth={1.5} />
+              {:else}
+                <EllipsisIcon size={15} strokeWidth={1.5} />
+              {/if}
             </Popover.Trigger>
             <Popover.Content class="flex flex-col space-y-2">
               <p class="font-medium">More tags:</p>