大改变

components/MintSwapPanel.tsx

@@ -3,51 +3,63 @@
 import { useState } from "react";
 import Image from "next/image";
 import { useApp } from "@/contexts/AppContext";
-import { Tabs, Tab, Button } from "@heroui/react";
 
 export default function MintSwapPanel() {
   const { t } = useApp();
   const [activeMode, setActiveMode] = useState<"mint" | "swap">("mint");
   const [activeAction, setActiveAction] = useState<"deposit" | "withdraw">("deposit");
-  const [amount, setAmount] = useState<string>("");
 
   return (
-    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col overflow-hidden">
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col">
       {/* Mint/Swap Tabs */}
-      <Tabs
-        selectedKey={activeMode}
-        onSelectionChange={(key) => setActiveMode(key as "mint" | "swap")}
-        variant="underlined"
-        classNames={{
-          base: "w-full",
-          tabList: "w-full gap-0 p-0 rounded-none border-b border-border-gray dark:border-gray-700",
-          cursor: "bg-text-primary dark:bg-blue-500 h-[2px]",
-          tab: "h-[53px] flex-1 rounded-none data-[selected=true]:bg-bg-subtle dark:data-[selected=true]:bg-gray-700",
-          tabContent: "text-body-small font-bold text-text-tertiary dark:text-gray-400 group-data-[selected=true]:text-[#0f172b] dark:group-data-[selected=true]:text-white",
-        }}
-      >
-        <Tab key="mint" title={t("mintSwap.mint")} />
-        <Tab key="swap" title={t("mintSwap.swap")} />
-      </Tabs>
+      <div className="flex border-b border-border-gray dark:border-gray-700">
+        <button
+          onClick={() => setActiveMode("mint")}
+          className={`flex-1 h-[53px] flex items-center justify-center text-body-small font-bold rounded-tl-3xl transition-colors ${
+            activeMode === "mint"
+              ? "bg-bg-subtle dark:bg-gray-700 border-b-2 border-text-primary dark:border-blue-500 text-[#0f172b] dark:text-white"
+              : "text-text-tertiary dark:text-gray-400"
+          }`}
+        >
+          {t("mintSwap.mint")}
+        </button>
+        <button
+          onClick={() => setActiveMode("swap")}
+          className={`flex-1 h-[53px] flex items-center justify-center text-body-small font-bold transition-colors ${
+            activeMode === "swap"
+              ? "bg-bg-subtle dark:bg-gray-700 border-b-2 border-text-primary dark:border-blue-500 text-[#0f172b] dark:text-white"
+              : "text-text-tertiary dark:text-gray-400"
+          }`}
+        >
+          {t("mintSwap.swap")}
+        </button>
+      </div>
 
       {/* Content */}
       <div className="flex flex-col gap-6 p-6">
         {/* Deposit/Withdraw Toggle */}
-        <Tabs
-          selectedKey={activeAction}
-          onSelectionChange={(key) => setActiveAction(key as "deposit" | "withdraw")}
-          variant="solid"
-          classNames={{
-            base: "w-full",
-            tabList: "bg-[#f9fafb] dark:bg-gray-700 rounded-xl p-1 gap-0 w-full",
-            cursor: "bg-bg-surface dark:bg-gray-600 shadow-sm",
-            tab: "h-8 px-4",
-            tabContent: "text-body-small font-medium text-text-tertiary dark:text-gray-400 group-data-[selected=true]:font-bold group-data-[selected=true]:text-text-primary dark:group-data-[selected=true]:text-white",
-          }}
-        >
-          <Tab key="deposit" title={t("mintSwap.deposit")} />
-          <Tab key="withdraw" title={t("mintSwap.withdraw")} />
-        </Tabs>
+        <div className="bg-[#f9fafb] dark:bg-gray-700 rounded-xl p-1 flex gap-0">
+          <button
+            onClick={() => setActiveAction("deposit")}
+            className={`flex-1 h-8 px-4 rounded-lg text-body-small transition-all ${
+              activeAction === "deposit"
+                ? "bg-bg-surface dark:bg-gray-600 font-bold text-text-primary dark:text-white shadow-sm"
+                : "font-medium text-text-tertiary dark:text-gray-400"
+            }`}
+          >
+            {t("mintSwap.deposit")}
+          </button>
+          <button
+            onClick={() => setActiveAction("withdraw")}
+            className={`flex-1 h-8 px-4 rounded-lg text-body-small transition-all ${
+              activeAction === "withdraw"
+                ? "bg-bg-surface dark:bg-gray-600 font-bold text-text-primary dark:text-white shadow-sm"
+                : "font-medium text-text-tertiary dark:text-gray-400"
+            }`}
+          >
+            {t("mintSwap.withdraw")}
+          </button>
+        </div>
 
         {/* Input Area */}
         <div className="flex flex-col gap-2">
@@ -62,13 +74,9 @@ export default function MintSwapPanel() {
                 <span className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
                   {t("mintSwap.balance")}: $12,500.00
                 </span>
-                <Button
-                  size="sm"
-                  className="rounded-full px-3 h-[22px] min-w-0 text-[10px] font-medium bg-[#e5e7eb] dark:bg-gray-600 text-[#111827] dark:text-white"
-                  onPress={() => setAmount("12500")}
-                >
+                <button className="rounded-full px-3 h-[22px] text-[10px] font-medium bg-[#e5e7eb] dark:bg-gray-600 text-[#111827] dark:text-white">
                   {t("mintSwap.max")}
-                </Button>
+                </button>
               </div>
             </div>
 
@@ -83,17 +91,11 @@ export default function MintSwapPanel() {
                 />
                 <span className="text-body-default font-bold text-text-primary dark:text-white">USDC</span>
               </button>
-              <div className="flex flex-col items-end flex-1">
-                <input
-                  type="number"
-                  placeholder="0.00"
-                  value={amount}
-                  onChange={(e) => setAmount(e.target.value)}
-                  className="w-full text-right text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500 bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                />
-                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
-                  {amount ? `≈ $${amount}` : "--"}
+              <div className="flex flex-col items-end">
+                <span className="text-heading-h3 font-bold text-[#d1d5db] dark:text-gray-500">
+                  0.00
                 </span>
+                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">--</span>
               </div>
             </div>
           </div>
@@ -164,13 +166,15 @@ export default function MintSwapPanel() {
         </div>
 
         {/* Submit Button */}
-        <Button
-          isDisabled
-          className="rounded-xl h-12 bg-[#9ca1af] dark:bg-gray-600 text-lg font-bold text-white"
-          endContent={<Image src="/icon8.svg" alt="" width={20} height={20} />}
+        <button
+          className="rounded-xl h-12 flex items-center justify-center gap-2 bg-[#9ca1af] dark:bg-gray-600"
+          disabled
         >
-          {t("mintSwap.approveDeposit")}
-        </Button>
+          <span className="text-lg font-bold text-white leading-7">
+            {t("mintSwap.approveDeposit")}
+          </span>
+          <Image src="/icon8.svg" alt="" width={20} height={20} />
+        </button>
 
         {/* Terms */}
         <div className="flex flex-col gap-0 text-center">