From a047575e69523567ded14a8d33656c93a47167f5 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 22 Aug 2024 14:24:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20new=20lucide=20icons=20and?=
 =?UTF-8?q?=20improve=20category=20display=20+=20show=20popover=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/copySvg.svelte |  2 +-
 src/components/svgCard.svelte | 39 +++++++++++++++++++++++++++++++----
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/components/copySvg.svelte b/src/components/copySvg.svelte
index 965ca3e..c1cabb6 100644
--- a/src/components/copySvg.svelte
+++ b/src/components/copySvg.svelte
@@ -139,7 +139,7 @@
       <CopyIcon size={iconSize} strokeWidth={iconStroke} />
     {/if}
   </Popover.Trigger>
-  <Popover.Content class="flex flex-col space-y-2" sideOffset={0.3}>
+  <Popover.Content class="flex flex-col space-y-2" sideOffset={3}>
     <button
       class={cn(buttonStyles, 'rounded-md w-full')}
       title={isWordmarkSvg ? 'Copy wordmark SVG to clipboard' : 'Copy SVG to clipboard'}
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index cfefa91..cab7a1b 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -6,12 +6,20 @@
   import { getSvgContent } from '@/utils/getSvgContent';
 
   // Icons:
-  import { LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
+  import {
+    LinkIcon,
+    ChevronsRight,
+    Baseline,
+    Sparkles,
+    EllipsisIcon,
+    TagIcon
+  } from 'lucide-svelte';
 
   // Components & styles:
   import DownloadSvg from './downloadSvg.svelte';
   import CopySvg from './copySvg.svelte';
-  import { badgeStyles } from '@/ui/styles';
+  import { badgeStyles, buttonStyles } from '@/ui/styles';
+  import * as Popover from '@/ui/popover';
 
   // Figma
   import { onMount } from 'svelte';
@@ -38,6 +46,9 @@
   let iconStroke = 1.8;
   let iconSize = 16;
 
+  // Max Categories:
+  let maxVisibleCategories = 1;
+
   // Global Images Styles:
   const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
 </script>
@@ -88,9 +99,29 @@
     </p>
     <div class="flex items-center space-x-1 justify-center">
       {#if Array.isArray(svgInfo.category)}
-        {#each svgInfo.category.sort() as c, index}
-          <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c} </a>
+        {#each svgInfo.category.slice(0, maxVisibleCategories) as c, index}
+          <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c}</a>
         {/each}
+
+        {#if svgInfo.category.length > maxVisibleCategories}
+          <Popover.Root>
+            <Popover.Trigger class={badgeStyles} title="More Tags">
+              <EllipsisIcon size={15} strokeWidth={1.5} />
+            </Popover.Trigger>
+            <Popover.Content class="flex flex-col space-y-2">
+              <p class="font-medium">More tags:</p>
+              {#each svgInfo.category.slice(maxVisibleCategories) as c}
+                <a
+                  href={`/directory/${c.toLowerCase()}`}
+                  class={cn(buttonStyles, 'rounded-md w-full')}
+                >
+                  <TagIcon size={15} strokeWidth={1.5} />
+                  <span>{c}</span>
+                </a>
+              {/each}
+            </Popover.Content>
+          </Popover.Root>
+        {/if}
       {:else}
         <a href={`/directory/${svgInfo.category.toLowerCase()}`} class={badgeStyles}>
           {svgInfo.category}