116 lines
5.0 KiB
TypeScript
116 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import VipCard from "./VipCard";
|
|
import { useApp } from "@/contexts/AppContext";
|
|
|
|
export default function PointsDashboard() {
|
|
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-6">
|
|
{/* Header Row */}
|
|
<div className="flex items-center justify-between">
|
|
{/* Left - Tags */}
|
|
<div className="flex items-center gap-3">
|
|
{/* Season 1 Tag */}
|
|
<div className="bg-[#f9fafb] dark:bg-gray-700 border border-border-normal dark:border-gray-600 rounded-full px-3 py-1 flex items-center justify-center">
|
|
<span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
|
|
{t("points.season1")}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Live Tag */}
|
|
<div className="bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1 flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-[#10b981] opacity-55" />
|
|
<span className="text-caption-tiny font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
|
|
{t("points.live")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right - 7x Points Button */}
|
|
<div className="rounded-[14px] px-4 py-2 flex items-center gap-2 h-[34.78px] shadow-lg bg-gradient-to-r from-[#fee685] to-[#fdc700] rotate-1">
|
|
<Image src="/icon0.svg" alt="" width={16} height={16} />
|
|
<span className="text-caption-tiny font-bold text-text-primary leading-[150%] tracking-[0.01em]">
|
|
{t("points.xPoints")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex gap-6">
|
|
{/* Left Section - Points Info */}
|
|
<div className="flex-1 flex flex-col gap-6">
|
|
{/* Title */}
|
|
<div className="flex flex-col gap-1">
|
|
<h2 className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
|
|
{t("points.pointsDashboard")}
|
|
</h2>
|
|
<p className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
|
|
<span>{t("points.unlockUpTo")} </span>
|
|
<span className="font-bold text-[#fdc700]">{t("points.xPoints")}</span>
|
|
<span> {t("points.withEcosystemMultipliers")}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="flex items-center justify-between gap-6">
|
|
{/* Total Points */}
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-body-small font-bold text-text-secondary dark:text-gray-300 leading-[150%]">
|
|
{t("points.yourTotalPoints")}
|
|
</span>
|
|
<span className="text-[48px] font-extrabold leading-[110%] tracking-[-0.01em] font-jetbrains bg-gradient-to-b from-[#111827] to-[#4b5563] bg-clip-text text-transparent">
|
|
2,450
|
|
</span>
|
|
</div>
|
|
|
|
{/* Rank and Timer Container */}
|
|
<div className="bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-white/5 dark:border-gray-600 px-6 h-28 flex items-center gap-12">
|
|
{/* Global Rank */}
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
{t("points.globalRank")}
|
|
</span>
|
|
<span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
|
|
#8,204
|
|
</span>
|
|
<span className="text-[10px] font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
|
{t("points.topOfUsers")}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="w-px h-8 bg-border-normal dark:bg-gray-600" />
|
|
|
|
{/* Ends In */}
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
{t("points.endsIn")}
|
|
</span>
|
|
<span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
|
|
12d 4h
|
|
</span>
|
|
<span className="text-[10px] font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
|
Feb 28
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Section - VIP Card */}
|
|
<VipCard
|
|
memberTier="Silver Member"
|
|
level={2}
|
|
currentPoints={2450}
|
|
totalPoints={3000}
|
|
nextTier="Gold"
|
|
pointsToNextTier={550}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|