92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import EarnOpportunityCard from "./EarnOpportunityCard";
|
|
import ActivityHistory from "./ActivityHistory";
|
|
import TopPerformers from "./TopPerformers";
|
|
import ReferralCodeCard from "./ReferralCodeCard";
|
|
import BindInviteCard from "./BindInviteCard";
|
|
import TeamTVLCard from "./TeamTVLCard";
|
|
import DepositCard from "./DepositCard";
|
|
|
|
export default function PointsCards() {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
{/* First Row - Cards 1, 2, 3 */}
|
|
<div className="flex gap-6">
|
|
<ReferralCodeCard
|
|
code="PR0T0-8821"
|
|
onCopy={() => console.log("Copy clicked")}
|
|
onShare={() => console.log("Share clicked")}
|
|
/>
|
|
<BindInviteCard
|
|
placeholder="ENTER CODE"
|
|
onApply={(code) => console.log("Apply clicked", code)}
|
|
/>
|
|
<TeamTVLCard
|
|
currentTVL="$8.5M"
|
|
totalTVL="$10M"
|
|
progressPercent={85}
|
|
members={12}
|
|
roles={[
|
|
{ icon: "/icon-whale.svg", label: "Whales", current: 3, total: 3 },
|
|
{ icon: "/icon-trader.svg", label: "Traders", current: 0, total: 3 },
|
|
{ icon: "/icon-user.svg", label: "Users", current: 5, total: 3 },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Second Row - Card 4 */}
|
|
<DepositCard
|
|
title="Deposit USDC to ALP"
|
|
subtitle="Native Staking"
|
|
badge="UP TO 3X"
|
|
lockPeriod="30 DAYS"
|
|
progressPercent={65}
|
|
pointsBoost="+10% POINTS"
|
|
onDeposit={() => console.log("Deposit clicked")}
|
|
/>
|
|
|
|
{/* Third Row - Earn Opportunities */}
|
|
<div className="flex gap-6">
|
|
<EarnOpportunityCard
|
|
pointsLabel="7X Points"
|
|
title="Pendle YT"
|
|
subtitle="Yield Trading optimization"
|
|
metricLabel="EST. APY"
|
|
metricValue="50%-300%"
|
|
buttonText="ZAP IN"
|
|
onButtonClick={() => console.log("ZAP IN clicked")}
|
|
/>
|
|
<EarnOpportunityCard
|
|
pointsLabel="4X Points"
|
|
title="Curve LP"
|
|
subtitle="Liquidity Pool provision"
|
|
metricLabel="CURRENT APY"
|
|
metricValue="15%-35%"
|
|
buttonText="Add Liquidity"
|
|
onButtonClick={() => console.log("Add Liquidity clicked")}
|
|
/>
|
|
<EarnOpportunityCard
|
|
pointsLabel="2X-8X Points"
|
|
title="Morpho"
|
|
subtitle="Lending Loop strategy"
|
|
metricLabel="MAX LTV"
|
|
metricValue="85%"
|
|
buttonText="Start LOOP"
|
|
onButtonClick={() => console.log("Start LOOP clicked")}
|
|
/>
|
|
</div>
|
|
|
|
{/* Fourth Row - Activity History and Top Performers */}
|
|
<div className="flex gap-6">
|
|
<div className="flex-[2]">
|
|
<ActivityHistory />
|
|
</div>
|
|
<div className="flex-1">
|
|
<TopPerformers />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|