大更新

components/lending/repay/RepayBorrowDebt.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Button } from "@heroui/react";
+import { useApp } from "@/contexts/AppContext";
+import { buttonStyles } from "@/lib/buttonStyles";
+
+export default function RepayBorrowDebt() {
+  const { t } = useApp();
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-8 flex-1 shadow-md">
+      {/* Title */}
+      <h3 className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
+        {t("repay.borrowDebt")}
+      </h3>
+
+      {/* Token Info and APR */}
+      <div className="flex items-center justify-between h-[50px]">
+        {/* Left - Token Info */}
+        <div className="flex items-center gap-4">
+          {/* Token Icon */}
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center text-white text-[10px] font-bold shadow-md"
+            style={{ background: "linear-gradient(135deg, #00BBA7 0%, #007A55 100%)" }}
+          >
+            LOGO
+          </div>
+
+          {/* Amount */}
+          <div className="flex flex-col">
+            <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+              1,000 USDC
+            </span>
+            <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              $1,000.00
+            </span>
+          </div>
+        </div>
+
+        {/* Right - APR */}
+        <div className="flex flex-col items-end">
+          <span className="text-heading-h3 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.005em]">
+            6.1%
+          </span>
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("repay.apr")}
+          </span>
+        </div>
+      </div>
+
+      {/* Buttons */}
+      <div className="grid grid-cols-2 gap-3">
+        <Button className={buttonStyles({ intent: "theme" })}>
+          {t("repay.borrow")}
+        </Button>
+        <Button className="rounded-xl h-11 w-full px-6 text-body-small font-bold bg-content2 text-foreground">
+          {t("repay.repay")}
+        </Button>
+      </div>
+    </div>
+  );
+}