k
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
import type { BotPerformance } from '@/types'
|
|
import { formatPrice, formatPct } from '@/lib/utils'
|
|
import { useDashboardStore } from '@/store/dashboard'
|
|
|
|
interface KpiRowProps {
|
|
performance?: BotPerformance
|
|
postsCount?: number
|
|
}
|
|
|
|
interface StatCard {
|
|
labelKey: string
|
|
value: string
|
|
change?: string
|
|
changePositive?: boolean
|
|
}
|
|
|
|
export default function KpiRow({ performance, postsCount }: KpiRowProps) {
|
|
const t = useTranslations('kpi')
|
|
const { livePrices } = useDashboardStore()
|
|
|
|
const stats: StatCard[] = [
|
|
{
|
|
labelKey: 'btcPrice',
|
|
value: formatPrice(livePrices.BTC ?? 94230),
|
|
change: livePrices.BTC ? 'live' : '+1.4%',
|
|
changePositive: true,
|
|
},
|
|
{
|
|
labelKey: 'ethPrice',
|
|
value: formatPrice(livePrices.ETH ?? 1847),
|
|
change: livePrices.ETH ? 'live' : '-0.8%',
|
|
changePositive: false,
|
|
},
|
|
{
|
|
labelKey: 'postsTracked',
|
|
value: postsCount != null ? postsCount.toLocaleString() : '1,247',
|
|
change: '+12 today',
|
|
changePositive: true,
|
|
},
|
|
{
|
|
labelKey: 'avgMove',
|
|
value: performance
|
|
? formatPct(performance.net_pnl_usd > 0 ? 2.3 : -2.3)
|
|
: formatPct(2.3),
|
|
change: 'after Trump posts',
|
|
changePositive: true,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{stats.map((stat) => (
|
|
<div
|
|
key={stat.labelKey}
|
|
className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5"
|
|
>
|
|
<p className="text-[11px] uppercase tracking-wider text-[#555555] mb-2">
|
|
{t(stat.labelKey as 'btcPrice' | 'ethPrice' | 'postsTracked' | 'avgMove')}
|
|
</p>
|
|
<p className="text-[22px] font-medium text-white leading-none mb-1.5">{stat.value}</p>
|
|
{stat.change && (
|
|
<p
|
|
className={`text-[12px] ${
|
|
stat.changePositive ? 'text-[#4ade80]' : 'text-[#ef4444]'
|
|
}`}
|
|
>
|
|
{stat.change}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|