From d69adfe4beb8957972200309666d66e14b62dfdc Mon Sep 17 00:00:00 2001
From: ridemountainpig <lin0905580802@gmail.com>
Date: Thu, 18 Jan 2024 01:16:56 +0800
Subject: [PATCH] feat: update multiple category layout

---
 src/components/svgCard.svelte | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index b8b51c6..13be9b4 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -190,21 +190,25 @@
       <p class="truncate text-[15px] font-medium text-balance text-center select-all">
         {svgInfo.title}
       </p>
-    </div>
-    <div class="mb-3 flex flex-col items-center justify-center h-10">
-      {#if Array.isArray(svgInfo.category)}
-        {#each svgInfo.category.sort() as c}
+      <div class="flex flex-wrap justify-center">
+        {#if Array.isArray(svgInfo.category)}
+          {#each svgInfo.category.sort() as c, index}
+            <a
+              href={`/directory/${c.toLowerCase()}`}
+              class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
+            >
+            {#if index < svgInfo.category.length - 1}
+              <span class="text-neutral-500">.</span>
+            {/if}
+          {/each}
+        {:else}
           <a
-            href={`/directory/${c.toLowerCase()}`}
-            class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
+            href={`/directory/${svgInfo.category.toLowerCase()}`}
+            class="text-sm lowercase text-neutral-500 hover:underline font-mono"
+            >{svgInfo.category}</a
           >
-        {/each}
-      {:else}
-        <a
-          href={`/directory/${svgInfo.category.toLowerCase()}`}
-          class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
-        >
-      {/if}
+        {/if}
+      </div>
     </div>
     <!-- Actions -->
     <div class="flex items-center space-x-1">