67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|