initial commit

components/lending/repay/RepayHeader.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function RepayHeader() {
+  const { t } = useApp();
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex items-center justify-between">
+      {/* Left Section - Token Icons and Title */}
+      <div className="flex items-center gap-2">
+        {/* Overlapping Token Icons */}
+        <div className="flex items-center relative">
+          <Image
+            src="/component-70.svg"
+            alt="YTGY"
+            width={52}
+            height={52}
+            className="relative z-10"
+          />
+          <Image
+            src="/usd-coin-usdc-logo-10.svg"
+            alt="USDC"
+            width={52}
+            height={52}
+            className="relative -ml-3"
+          />
+        </div>
+
+        {/* Title and Subtitle */}
+        <div className="flex flex-col gap-1">
+          <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
+            GY / USDC
+          </h1>
+          <p className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+            {t("repay.supplyToBorrow")}
+          </p>
+        </div>
+      </div>
+
+      {/* Right Section - Stats */}
+      <div className="flex items-center justify-between w-[262px]">
+        {/* Price */}
+        <div className="flex flex-col gap-1">
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("repay.price")}
+          </span>
+          <span className="text-heading-h3 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.005em]">
+            $1.29
+          </span>
+        </div>
+
+        {/* Available */}
+        <div className="flex flex-col gap-1">
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("repay.available")}
+          </span>
+          <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+            14.2M
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}