57 行
1.7 KiB
TypeScript
57 行
1.7 KiB
TypeScript
import { useLocation } from 'react-router-dom'
|
|
|
|
import PrefetchLink from '@/components/PrefetchLink'
|
|
import LocalisedText from '@/components/LocalisedText'
|
|
import { menuOutline } from '@/components/TopNav'
|
|
import SectionTitle from '@/components/common/SectionTitle'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import PageHead from '@/components/common/PageHead'
|
|
import { useUITranslation } from '@/lib/useUITranslation'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
import type { User } from '@/types'
|
|
|
|
|
|
const MorePage: FC = () => {
|
|
const location = useLocation ()
|
|
const { message } = useUITranslation ('shared')
|
|
const menu = menuOutline (
|
|
{ tag: null, wikiId: null, user: { } as User, pathName: location.pathname })
|
|
|
|
return (
|
|
<MainArea className="md:flex">
|
|
<PageHead title={message ('labels.menu')}/>
|
|
|
|
{[...Array (Math.ceil (menu.length / 4)).keys ()].map (i => (
|
|
<div key={i} className="flex-1 mx-16">
|
|
{menu.slice (4 * i, 4 * (i + 1)).map ((item, j) => (
|
|
<section key={j}>
|
|
<SectionTitle className="font-bold">
|
|
<LocalisedText language={item.nameLanguage ?? 'ja'}>
|
|
{item.name}
|
|
</LocalisedText>
|
|
</SectionTitle>
|
|
<ul>
|
|
{item.subMenu
|
|
.filter (subItem => (subItem.visible ?? true))
|
|
.map ((subItem, k) => ('name' in subItem && (
|
|
<li key={k}>
|
|
<PrefetchLink
|
|
to={subItem.to}
|
|
target={subItem.to.slice (0, 2) === '//'
|
|
? '_blank'
|
|
: undefined}>
|
|
<LocalisedText language={subItem.nameLanguage ?? 'ja'}>
|
|
{subItem.name}
|
|
</LocalisedText>
|
|
</PrefetchLink>
|
|
</li>)))}
|
|
</ul>
|
|
</section>))}
|
|
</div>))}
|
|
</MainArea>)
|
|
}
|
|
|
|
export default MorePage
|