@@ -3,18 +3,28 @@ import { Link } from 'react-router-dom' | |||||
import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts' | import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts' | ||||
import { cn } from '@/lib/utils' | import { cn } from '@/lib/utils' | ||||
import type { ComponentProps, HTMLAttributes } from 'react' | |||||
import type { Tag } from '@/types' | 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, | export default ({ tag, | ||||
linkFlg = true, | linkFlg = true, | ||||
withWiki = true, | withWiki = true, | ||||
withCount = true }: Props) => { | |||||
withCount = true, | |||||
...props }: Props) => { | |||||
const spanClass = cn ( | const spanClass = cn ( | ||||
`text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`, | `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`, | ||||
`dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`) | `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`) | ||||
@@ -35,11 +45,13 @@ export default ({ tag, | |||||
{linkFlg | {linkFlg | ||||
? ( | ? ( | ||||
<Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`} | <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`} | ||||
className={linkClass}> | |||||
className={linkClass} | |||||
{...props}> | |||||
{tag.name} | {tag.name} | ||||
</Link>) | </Link>) | ||||
: ( | : ( | ||||
<span className={spanClass}> | |||||
<span className={spanClass} | |||||
{...props}> | |||||
{tag.name} | {tag.name} | ||||
</span>)} | </span>)} | ||||
{withCount && ( | {withCount && ( | ||||
@@ -102,7 +102,9 @@ export default () => { | |||||
<Tab name="Wiki" init={!(posts.length)}> | <Tab name="Wiki" init={!(posts.length)}> | ||||
<WikiBody body={wikiPage.body} /> | <WikiBody body={wikiPage.body} /> | ||||
<div className="my-2"> | <div className="my-2"> | ||||
<Link to={`/wiki/${ encodeURIComponent (wikiPage.title) }`}>Wiki を見る</Link> | |||||
<Link to={`/wiki/${ encodeURIComponent (wikiPage.title) }`}> | |||||
Wiki を見る | |||||
</Link> | |||||
</div> | </div> | ||||
</Tab>)} | </Tab>)} | ||||
</TabGroup> | </TabGroup> | ||||
@@ -102,20 +102,25 @@ export default () => { | |||||
{(wikiPage && version) && ( | {(wikiPage && version) && ( | ||||
<div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4"> | <div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4"> | ||||
{wikiPage.pred ? ( | {wikiPage.pred ? ( | ||||
<Link to={`/wiki/${ title }?version=${ wikiPage.pred }`}> | |||||
<Link to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.pred }`}> | |||||
< 古 | < 古 | ||||
</Link>) : <>(最古)</>} | |||||
</Link>) : '(最古)'} | |||||
<span>{wikiPage.updatedAt}</span> | <span>{wikiPage.updatedAt}</span> | ||||
{wikiPage.succ ? ( | {wikiPage.succ ? ( | ||||
<Link to={`/wiki/${ title }?version=${ wikiPage.succ }`}> | |||||
<Link to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.succ }`}> | |||||
新 > | 新 > | ||||
</Link>) : <>(最新)</>} | |||||
</Link>) : '(最新)'} | |||||
</div>)} | </div>)} | ||||
<PageTitle> | <PageTitle> | ||||
<TagLink tag={tag} withWiki={false} withCount={false} /> | |||||
<TagLink tag={tag} | |||||
withWiki={false} | |||||
withCount={false} | |||||
to={version | |||||
? `/wiki/${ encodeURIComponent (title) }` | |||||
: undefined} /> | |||||
</PageTitle> | </PageTitle> | ||||
<div className="prose mx-auto p-4"> | <div className="prose mx-auto p-4"> | ||||
{wikiPage === undefined | {wikiPage === undefined | ||||
@@ -123,7 +128,7 @@ export default () => { | |||||
: <WikiBody body={wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`} />} | : <WikiBody body={wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`} />} | ||||
</div> | </div> | ||||
{posts.length > 0 && ( | |||||
{(!(version) && posts.length > 0) && ( | |||||
<TabGroup> | <TabGroup> | ||||
<Tab name="広場"> | <Tab name="広場"> | ||||
<PostList posts={posts} /> | <PostList posts={posts} /> | ||||