67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import Link from "next/link"
|
|
import Image 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'
|
|
|
|
export default function HelpMenu() {
|
|
|
|
|
|
|
|
return (
|
|
<Wrap className="w-full grid grid-cols-4 gap-4 justify-items-center">
|
|
<Column
|
|
icon={h01}
|
|
title="提取IP"
|
|
items={[
|
|
{ lead: '短效动态IP提取', href: '#' },
|
|
{ lead: '长效静态IP提取', href: '#' },
|
|
]}
|
|
/>
|
|
<Column
|
|
icon={h02}
|
|
title="使用教程"
|
|
items={[
|
|
{ lead: '快速入手', href: '#' },
|
|
{ lead: '代码下载', href: '#' },
|
|
{ lead: 'API文档', href: '#' },
|
|
]}
|
|
/>
|
|
<Column
|
|
icon={h03}
|
|
title="产品功能"
|
|
items={[
|
|
{ lead: '常见问题', href: '#' },
|
|
{ lead: '产品介绍', href: '#' },
|
|
{ lead: '行业资讯', href: '#' },
|
|
]}
|
|
/>
|
|
<Image src={banner} alt={`banner`} className={``} />
|
|
</Wrap>
|
|
)
|
|
}
|
|
|
|
function Column(props: {
|
|
icon: any
|
|
title: string
|
|
items: {
|
|
lead: string
|
|
href: string
|
|
}[]
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<h3 className="font-bold flex gap-3 items-center">
|
|
<Image src={props.icon} alt={props.title} className="w-10 h-10" />
|
|
<span>{props.title}</span>
|
|
</h3>
|
|
<ul className=" text-gray-500 text-sm flex flex-col items-end gap-2">
|
|
{props.items.map((item, index) => (
|
|
<li key={index}><Link href={item.href}>{item.lead}</Link></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
} |