From 3e0725f680f7d025e1e32412d54ee122fd87e9ed Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Mon, 25 May 2026 01:50:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=88=E7=AB=AF=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=A4=A7=E6=B4=B2=20Tab=20=E6=A0=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scan-terminal/MobileRegionTabs.tsx        | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 frontend/components/dashboard/scan-terminal/MobileRegionTabs.tsx

diff --git a/frontend/components/dashboard/scan-terminal/MobileRegionTabs.tsx b/frontend/components/dashboard/scan-terminal/MobileRegionTabs.tsx
new file mode 100644
index 00000000..53868e74
--- /dev/null
+++ b/frontend/components/dashboard/scan-terminal/MobileRegionTabs.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import clsx from "clsx";
+import type { ContinentGroup } from "@/components/dashboard/scan-terminal/continent-grouping";
+
+export function MobileRegionTabs({
+  activeTab,
+  groups,
+  isEn,
+  onSelectTab,
+}: {
+  activeTab: string;
+  groups: ContinentGroup[];
+  isEn: boolean;
+  onSelectTab: (key: string) => void;
+}) {
+  return (
+    <div className="mobile-region-tabs flex overflow-x-auto border-b border-slate-200 bg-white px-2">
+      {groups.map((g) => {
+        const label = isEn ? g.labelEn : g.labelZh;
+        const isActive = activeTab === g.key;
+        return (
+          <button
+            key={g.key}
+            type="button"
+            onClick={() => onSelectTab(g.key)}
+            className={clsx(
+              "shrink-0 px-3 py-2.5 text-xs font-bold whitespace-nowrap border-b-2 transition-colors",
+              isActive
+                ? "border-blue-600 text-blue-700"
+                : "border-transparent text-slate-500 hover:text-slate-700"
+            )}
+          >
+            {label}
+            <span className="ml-1 text-[10px] text-slate-400">
+              {g.activeCount > 0 ? `${g.activeCount}A` : g.rows.length}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}