nshop-front-pc/src/app/(public)/search/_components/HotSearch.tsx

'use client';

import Link from 'next/link';
// import { createUrl } from '@/utils/helper';

const hotTags = [
  {
    name: 'HD Wig',
    href: '/search?q=HD%20Wig'
  },
  {
    name: 'Glueless Wig',
    href: '/search?q=Glueless%20Wig'
  },
  {
    name: 'New Arrival',
    href: '/search?q=New%20Arrival'
  },
  {
    name: 'Color Wig',
    href: '/search?q=Color%20Wig'
  },
  {
    name: 'Lace Front Wig',
    href: '/search?q=Lace%20Front%20Wig'
  },
  {
    name: 'Bundles',
    href: '/search?q=Bundles'
  },
  {
    name: 'M Hairline',
    href: '/search?q=M%20Hairline'
  },
  {
    name: '13x6',
    href: '/search?q=13x6'
  },
];

export default function HotSearch() {

  return (
    <div className="w-full max-w-screen-2xl mx-auto  py-6 pb-8">
      <h2 className="text-base font-medium text-black mb-4">Hot Search</h2>
      <div className="flex flex-wrap items-center justify-start gap-3">
        {hotTags.map((tag) => {
          // 构造带q参数的搜索url
          return (
            <Link
              key={tag.name}
              href={tag.href}
              className="bg-[#F2F2F2FF] rounded-sm px-[15px] py-2 flex items-center justify-center text-sm text-black font-normal"
            >
              {tag.name}
            </Link>
          );
        })}
      </div>
    </div>
  );
}