From 01f5193994af3dcd0bb14118925e6bc05449bd71 Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Sat, 17 May 2025 12:31:55 +0800
Subject: [PATCH] Improve tag display

---
 frontend/src/components/badge.tsx            | 5 +++++
 frontend/src/components/resource_card.tsx    | 3 ++-
 frontend/src/pages/resource_details_page.tsx | 5 +++--
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/badge.tsx

diff --git a/frontend/src/components/badge.tsx b/frontend/src/components/badge.tsx
new file mode 100644
index 0000000..d756ec1
--- /dev/null
+++ b/frontend/src/components/badge.tsx
@@ -0,0 +1,5 @@
+import {ReactNode} from "react";
+
+export default function Badge({children, className, onClick }: { children: ReactNode, className?: string, onClick?: () => void }) {
+  return <span className={`badge badge-primary text-sm ${className}`} onClick={onClick}>{children}</span>
+}
\ No newline at end of file
diff --git a/frontend/src/components/resource_card.tsx b/frontend/src/components/resource_card.tsx
index e0ae9d4..04d6c13 100644
--- a/frontend/src/components/resource_card.tsx
+++ b/frontend/src/components/resource_card.tsx
@@ -1,6 +1,7 @@
 import { Resource } from "../network/models.ts";
 import { network } from "../network/network.ts";
 import { useNavigate } from "react-router";
+import Badge from "./badge.tsx";
 
 export default function ResourceCard({ resource }: { resource: Resource }) {
   const navigate = useNavigate()
@@ -25,7 +26,7 @@ export default function ResourceCard({ resource }: { resource: Resource }) {
         <p>
           {
             resource.tags.map((tag) => {
-              return <span key={tag.id} className={"badge badge-primary mr-2"}>{tag.name}</span>
+              return <Badge key={tag.id} className={"m-0.5"}>{tag.name}</Badge>
             })
           }
         </p>
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index 923f616..d97be64 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -22,6 +22,7 @@ import Pagination from "../components/pagination.tsx";
 import showPopup, {useClosePopup} from "../components/popup.tsx";
 import {Turnstile} from "@marsidev/react-turnstile";
 import Button from "../components/button.tsx";
+import Badge from "../components/badge.tsx";
 
 export default function ResourcePage() {
   const params = useParams()
@@ -104,9 +105,9 @@ export default function ResourcePage() {
       <p className={"px-4 pt-2"}>
         {
           resource.tags.map((e) => {
-            return <span key={e.id} className="badge badge-primary mr-2 text-sm cursor-pointer" onClick={() => {
+            return <Badge key={e.id} className="cursor-pointer m-1" onClick={() => {
               navigate(`/tag/${e.name}`);
-            }}>{e.name}</span>
+            }}>{e.name}</Badge>
           })
         }
       </p>