Spaces:
Paused
Paused
File size: 3,870 Bytes
e9d4f6a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | "use client";
import { motion } from "framer-motion";
import { Droplets, Users, Cpu, TrendingUp, BookOpen, Percent, AlertTriangle, Award, Layers, Wallet } from "lucide-react";
import StatCard from "./StatCard";
import StatusBadge from "./StatusBadge";
const fadeUp = { hidden: { opacity: 0, y: 16 }, visible: (i = 0) => ({ opacity: 1, y: 0, transition: { duration: 0.4, delay: i * 0.05, ease: [0.23, 1, 0.32, 1] } }) };
export default function OverviewTab({ data }: { data: any }) {
const s = data?.slippage || {};
const h = data?.holders || {};
const l = data?.liquidity || {};
const t = data?.trading || {};
const f = data?.funding || {};
const liq = data?.liquidation || {};
const m = data?.mining || {};
return (
<motion.div key="overview" initial="hidden" animate="visible" variants={fadeUp} className="space-y-5">
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<StatCard title="Slippage Collected" value={`$${(s.total_collected_usd || 0).toLocaleString()}`} icon={Droplets} color="cyan" delay={0} />
<StatCard title="Total Holders" value={h.total_holders || 0} icon={Users} color="violet" delay={1} />
<StatCard title="LLM Liquidity" value={`$${(l.total_liquidity_usd || 0).toLocaleString()}`} icon={Cpu} color="emerald" delay={2} />
<StatCard title="24h Volume" value={`$${(t.total_volume || 0).toLocaleString()}`} icon={TrendingUp} color="cyan" delay={3} />
<StatCard title="Active Positions" value={t.active_positions || 0} icon={BookOpen} color="amber" delay={4} />
<StatCard title="Funding Rate" value={`${((f.current_rate || 0) * 100).toFixed(4)}%`} icon={Percent} color="amber" delay={5} />
<StatCard title="Insurance Fund" value={`$${(liq.insurance_fund || 0).toLocaleString()}`} icon={AlertTriangle} color="rose" delay={6} />
<StatCard title="Mining Rewards" value={`$${(m.total_rewards || 0).toLocaleString()}`} icon={Award} color="emerald" delay={7} />
</div>
<div className="glass rounded-xl p-4">
<div className="flex items-center gap-2 mb-3"><Layers className="w-4 h-4 text-[#38bdf8]" /><h2 className="text-sm font-bold text-[#e2e2ec] tracking-tight">System Status</h2></div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{data?.status_meta && Object.entries(data.status_meta).map(([key, meta]: [string, any]) => (
<div key={key} className="glass-strong rounded-xl p-3 border border-white/[0.04]">
<div className="flex items-center justify-between mb-1"><span className="text-xs font-semibold text-[#e2e2ec]">{meta.label}</span><StatusBadge status={meta.status} /></div>
<p className="text-[10px] text-[#9a9aae] leading-relaxed">{meta.detail}</p>
</div>
))}
</div>
</div>
<div className="glass rounded-xl p-4">
<div className="flex items-center gap-2 mb-3"><Wallet className="w-4 h-4 text-[#818cf8]" /><h2 className="text-sm font-bold text-[#e2e2ec] tracking-tight">Integration Map</h2></div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{data?.config && Object.entries(data.config).map(([key, item]: [string, any]) => (
<div key={key} className="glass-strong rounded-xl p-3 border border-white/[0.04]">
<div className="text-[10px] font-bold text-[#5a5a6e] uppercase tracking-widest mb-1">{item.label}</div>
<div className="flex items-center justify-between"><StatusBadge status={item.status} />{item.value_public && <span className="text-[10px] text-[#5a5a6e] font-mono truncate max-w-[120px]">{item.value_public}</span>}</div>
{item.env && <div className="text-[10px] text-[#5a5a6e] mt-1">{item.env}</div>}
</div>
))}
</div>
</div>
</motion.div>
);
}
|