web/src/app/(home)/@header/_client/help.tsx

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'

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: StaticImageData
  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>
  )
}