web/src/app/(home)/_components/header/menu-solution.tsx

import Wrap from '@/components/wrap'
import s01 from '@/assets/header/solution/01.svg'
import s02 from '@/assets/header/solution/02.svg'
import s03 from '@/assets/header/solution/03.svg'
import s04 from '@/assets/header/solution/04.svg'
import s05 from '@/assets/header/solution/05.svg'
import s06 from '@/assets/header/solution/06.svg'
import s07 from '@/assets/header/solution/07.svg'
import s08 from '@/assets/header/solution/08.svg'
import {StaticImageData} from 'next/image'
import Link from 'next/link'
import {useRouter} from 'next/navigation'
import {useContext} from 'react'
import {FragmentTitle, HeaderContext} from './common'

export default function SolutionMenu() {
  return (
    <Wrap className="h-full grid grid-cols-2 lg:grid-cols-4 pl=2 auto-rows-fr gap-4">
      <SolutionItem
        icon={s01}
        title="数据抓取"
        desc="高效采集和分析大量数据，助力企业获取大量情报"
        href="/data-capture"
      />
      <SolutionItem
        icon={s02}
        title="广告验证"
        desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
        href="#"
      />
      <SolutionItem
        icon={s03}
        title="市场调查"
        desc="收集全网行业数据，了解竞争对手动态"
        href="#"
      />
      <SolutionItem
        icon={s04}
        title="SEO优化"
        desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
        href="#"
      />
      <SolutionItem
        icon={s05}
        title="品牌保护"
        desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
        href="#"
      />
      <SolutionItem
        icon={s06}
        title="价格监控"
        desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
        href="#"
      />
      <SolutionItem
        icon={s07}
        title="金融数据"
        desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
        href="#"
      />
      <SolutionItem
        icon={s08}
        title="网站测试"
        desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
        href="#"
      />
    </Wrap>
  )
}

function SolutionItem(props: {
  icon: StaticImageData
  title: string
  desc: string
  href: string
}) {
  const router = useRouter()
  const ctx = useContext(HeaderContext)
  if (!ctx) {
    throw new Error(`HeaderContext not found`)
  }

  const onClick = () => {
    ctx.setMenu(false)
    router.push(props.href)
  }
  return (
    <Link
      href={props.href}
      className={[
        `flex flex-col gap-2 items-start rounded-md cursor-pointer`,
        `transition-colors duration-200 hover:bg-blue-50`,
      ].join(' ')}
      onClick={onClick}
    >
      <FragmentTitle img={props.icon} text={props.title}/>
      <p className="text-gray-400 text-sm">{props.desc}</p>
    </Link>
  )
}