nshop-front-m/src/app/(public)/customer/account/_components/HelpModal.tsx

import Link from "next/link";
export default function HelpModal({
  helpvisible,
  helponClose,
}: {
  helpvisible: boolean;
  helponClose: () => void;
}) {
  // 如果不显示，直接 return null
  if (!helpvisible) return null;
  return (
    <div className="fixed inset-0 z-51 bg-black/50">
      {/* 弹框主体 - 从底部滑上来 */}
      <div className="absolute bottom-0 rounded-none left-0 right-0 w-full h-full bg-white  overflow-auto">
        <div className="flex flex-col">
          {/* 顶部导航 */}
          <header className="bg-black text-white py-4 px-4 flex items-center">
            <button onClick={helponClose} className="mr-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>
            <h1 className="text-lg font-medium">HELP & SUPPORT</h1>
          </header>
          {/* 菜单列表 */}
          <div className="px-4 py-2">
            {/* Information */}
            <Link
              href={"/help-faqs"}
              className="py-4 border-b border-gray-100 flex justify-between items-center"
            >
              {/* <div > */}
              <span className="text-black font-medium">Help & FAQ</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-5 w-5 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
              {/* </div> */}
            </Link>
            {/* Address */}
            <Link
              href={"/track_order"}
              className="py-4 border-b border-gray-100 flex justify-between items-center"
            >
              {/* <div > */}
              <span className="text-black font-medium">Track Order</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-5 w-5 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
              {/* </div> */}
            </Link>
            {/* help & Support */}
            <Link
              href={"/hair-care-tips"}
              className="py-4 border-b border-gray-100 flex justify-between items-center"
            >
              {/* <div > */}
              <span className="text-black font-medium">Hair Care Tips</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-5 w-5 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
              {/* </div> */}
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}