first day of vibe coding

2026-04-20 22:11:18 +08:00
commit 1747fc489f
38 changed files with 15267 additions and 0 deletions
@@ -0,0 +1,77 @@
+'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>
+  )
+}