Improve tag display

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>
+}

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>

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>