web/src/app/(root)/@header/_client/product.tsx

'use client'

import {useContext, useState} from 'react'
import Wrap from '@/components/wrap'
import Image from 'next/image'
import anno from '@/assets/header/product/anno.svg'
import {Domestic, Oversea, Tab} from '@/app/(root)/@header/_server/product'
import Link from 'next/link'
import {merge} from '@/lib/utils'
import {HeaderContext} from '@/app/(root)/@header/page'

type TabType = 'domestic' | 'oversea'

export default function ProductMenu() {

  const [type, setType] = useState<TabType>('domestic')

  return (
    <Wrap className="flex">
      <ul role="tablist" className="w-48">
        <Tab selected={type === 'domestic'} onSelect={() => setType('domestic')}>国内代理</Tab>
        <Tab selected={type === 'oversea'} onSelect={() => setType('oversea')}>海外代理</Tab>
      </ul>
      <div className="flex-1">
        {type === 'domestic'
          ? (
            <Domestic/>
          ) : (
            <Oversea/>
          )
        }
      </div>
      <aside className="w-64">
        <h3 className="flex gap-3 items-center mb-4">
          <Image src={anno} alt={`公告`} className={`w-10 h-10`}/>
          <span>网站公告</span>
        </h3>
        <div className="flex flex-col gap-2">
          <p>官网最新上线，体验再升级！</p>
          <p className="text-gray-400 text-sm">
            1.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
          <p className="text-gray-400 text-sm">
            2.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
        </div>
      </aside>
    </Wrap>
  )
}

export function DomesticLink(props: {
  label: string
  desc: string
  href: string
  discount: number
}) {
  const ctx = useContext(HeaderContext)
  if (!ctx) {
    throw new Error(`HeaderContext not found`)
  }

  const onClick = () => {
    ctx.setMenu(false)
  }

  return (
    <Link href={props.href} className={merge(
      `transition-colors duration-150 ease-in-out`,
      `p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
    )} onClick={onClick}>
      <p className="flex gap-2">
        <span>{props.label}</span>
        <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
          折扣{props.discount}%
        </span>
      </p>
      <p className="text-gray-400 text-sm">
        {props.desc}
      </p>
    </Link>
  )
}