diff --git a/frontend/src/components/TagSidebar.tsx b/frontend/src/components/TagSidebar.tsx index 735490d..b8f5f07 100644 --- a/frontend/src/components/TagSidebar.tsx +++ b/frontend/src/components/TagSidebar.tsx @@ -58,15 +58,52 @@ export default (({ posts }: Props) => { setTags (tagsTmp) }, [posts]) + const TagBlock = ( + <> + タグ + + 関聯 + {posts.length > 0 && ( + { + ev.preventDefault () + void ((async () => { + try + { + const { data } = await axios.get (`${ API_BASE_URL }/posts/random`, + { params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '), + match: (anyFlg ? 'any' : 'all') } }) + navigate (`/posts/${ (data as Post).id }`) + } + catch + { + ; + } + }) ()) + }}> + ランダム + )} + ) + return ( +
+ {TagBlock} +
+ {tagsVsbl && ( { animate="visible" exit="hidden" transition={{ duration: .2, ease: 'easeOut' }}> - タグ -
    - {CATEGORIES.flatMap (cat => cat in tags ? ( - tags[cat].map (tag => ( -
  • - -
  • ))) : [])} -
- 関聯 - {posts.length > 0 && ( - { - ev.preventDefault () - void ((async () => { - try - { - const { data } = await axios.get (`${ API_BASE_URL }/posts/random`, - { params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '), - match: (anyFlg ? 'any' : 'all') } }) - navigate (`/posts/${ (data as Post).id }`) - } - catch - { - ; - } - }) ()) - }}> - ランダム - )} + {TagBlock}
)}
@@ -113,7 +122,7 @@ export default (({ posts }: Props) => { dark:text-gray-300 dark:hover:text-gray-100" onClick={ev => { ev.preventDefault () - setTagsVsbl (!(tagsVsbl)) + setTagsVsbl (v => !(v)) }}> {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}