83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
'use client'
|
|
import Link from 'next/link'
|
|
import Image, {StaticImageData} from 'next/image'
|
|
import Wrap from '@/components/wrap'
|
|
import h01 from '@/assets/header/help/01.svg'
|
|
import h02 from '@/assets/header/help/02.svg'
|
|
import h03 from '@/assets/header/help/03.svg'
|
|
import banner from '@/assets/header/help/banner.webp'
|
|
import {FragmentTitle, HeaderContext} from './common'
|
|
import {useContext} from 'react'
|
|
import {useRouter} from 'next/navigation'
|
|
|
|
export default function HelpMenu() {
|
|
return (
|
|
<Wrap className="w-full grid sm:grid-cols-3 lg:grid-cols-4 gap-4 justify-items-start">
|
|
<Column
|
|
icon={h01}
|
|
title="提取 IP"
|
|
items={[
|
|
{lead: '短效/长效 IP 提取', href: '/collect?type=short'},
|
|
// {lead: '长效 IP 提取', href: '/collect?type=long'},
|
|
]}
|
|
/>
|
|
<Column
|
|
icon={h02}
|
|
title="操作指南"
|
|
items={[
|
|
{lead: '修改信息', href: '/docs/profile-settings'},
|
|
{lead: '提取链接', href: '/docs/extract-link'},
|
|
{lead: '查看记录', href: '/docs/payment-records'},
|
|
]}
|
|
/>
|
|
<Column
|
|
icon={h03}
|
|
title="平台教程"
|
|
items={[
|
|
{lead: 'iOS 设置', href: '/docs/ios-proxy'},
|
|
{lead: 'Android 设置', href: '/docs/android-proxy'},
|
|
{lead: 'Windows 设置', href: '/docs/windows10-proxy'},
|
|
]}
|
|
/>
|
|
<Image src={banner} alt="banner" className="hidden lg:block"/>
|
|
</Wrap>
|
|
)
|
|
}
|
|
|
|
function Column(props: {
|
|
icon: StaticImageData
|
|
title: string
|
|
items: {
|
|
lead: string
|
|
href: string
|
|
}[]
|
|
}) {
|
|
const ctx = useContext(HeaderContext) // 获取菜单上下文
|
|
const router = useRouter()
|
|
|
|
if (!ctx) {
|
|
throw new Error(`HeaderContext not found`)
|
|
}
|
|
return (
|
|
<div className="flex-1 flex flex-col gap-4">
|
|
<FragmentTitle img={props.icon} text={props.title}/>
|
|
<ul className="flex flex-col gap-2">
|
|
{props.items.map((item, index) => (
|
|
<li key={index}>
|
|
<Link
|
|
href={item.href}
|
|
className="px-4 py-2"
|
|
onClick={() => {
|
|
ctx.setMenu(false)
|
|
router.push(item.href)
|
|
}}
|
|
>
|
|
{item.lead}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|