initial commit

components/lending/repay/RepayStats.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function RepayStats() {
+  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 h-[249px] shadow-md">
+      {/* Stats Info */}
+      <div className="flex flex-col gap-6 h-[120px]">
+        {/* NET APR */}
+        <div className="flex items-center justify-between h-7">
+          <div className="flex items-center gap-2">
+            <Image src="/icon0.svg" alt="" width={18} height={18} />
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              {t("repay.netApr")}
+            </span>
+          </div>
+          <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
+            3%
+          </span>
+        </div>
+
+        {/* Liq.price/offset */}
+        <div className="flex items-center justify-between h-7">
+          <div className="flex items-center gap-2">
+            <Image src="/icon1.svg" alt="" width={18} height={18} />
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              {t("repay.liqPriceOffset")}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+              $0.938
+            </span>
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              / 20%
+            </span>
+          </div>
+        </div>
+
+        {/* Position Health */}
+        <div className="flex items-center justify-between h-7">
+          <div className="flex items-center gap-2">
+            <Image src="/icon2.svg" alt="" width={18} height={18} />
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              {t("repay.positionHealth")}
+            </span>
+          </div>
+          <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
+            Safe 50%
+          </span>
+        </div>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="w-full">
+        <div className="w-full h-2 bg-fill-secondary-click dark:bg-gray-700 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-[#10b981] dark:bg-green-500 rounded-full"
+            style={{ width: "50%" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}