|
|
@@ -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 && ( |
|
|
|