#71

frontend/src/components/TagLink.tsx

@@ -3,18 +3,28 @@ import { Link } from 'react-router-dom'
 import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
 import { cn } from '@/lib/utils'
 
+import type { ComponentProps, HTMLAttributes } from 'react'
+
 import type { Tag } from '@/types'
 
-type Props = { tag:         Tag
-	       linkFlg?:    boolean
-	       withWiki?:   boolean
-	       withCount?:  boolean }
+type CommonProps = { tag:         Tag
+		     withWiki?:   boolean
+		     withCount?:  boolean }
+
+type PropsWithLink =
+    CommonProps & { linkFlg?: true } & Partial<ComponentProps<typeof Link>>
+
+type PropsWithoutLink =
+    CommonProps & { linkFlg: false } & Partial<HTMLAttributes<HTMLSpanElement>>
+
+type Props = PropsWithLink | PropsWithoutLink
 
 
 export default ({ tag,
 		  linkFlg   = true,
 		  withWiki  = true,
-		  withCount = true }: Props) => {
+		  withCount = true,
+		  ...props }: Props) => {
   const spanClass = cn (
       `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
       `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -35,11 +45,13 @@ export default ({ tag,
 	{linkFlg
 	 ? (
 	    <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		  className={linkClass}>
+		  className={linkClass}
+		  {...props}>
 	      {tag.name}
 	    </Link>)
 	 : (
-	    <span className={spanClass}>
+	    <span className={spanClass}
+		  {...props}>
 	      {tag.name}
 	    </span>)}
 	{withCount && (