StatsGrid

'use client'
import { useEffect, useRef } from 'react'

interface Stat {
  label: string
  value: string
  delta: string
  up: boolean
  data: number[]
  color: string
}

const stats: Stat[] = [
  { label: 'Monthly Revenue', value: '$48,200', delta: '+12.4%', up: true, data: [30,45,28,60,45,70,55,80,65,90,75,100], color: '#C9A84C' },
  { label: 'Active Users', value: '12,847', delta: '+8.1%', up: true, data: [60,55,70,65,80,75,90,85,95,88,92,100], color: '#6366f1' },
  { label: 'Components Live', value: '1,240', delta: '+220', up: true, data: [20,30,40,50,55,60,65,70,75,80,90,100], color: '#22c55e' },
  { label: 'Churn Rate', value: '2.3%', delta: '-0.4%', up: false, data: [100,90,85,95,80,88,75,82,70,78,65,60], color: '#ef4444' },
]

function Sparkline({ data, color }: { data: number[]; color: string }) {
  const ref = useRef<SVGSVGElement>(null)
  const w = 80, h = 32
  const max = Math.max(...data)
  const min = Math.min(...data)
  const range = max - min || 1
  const pts = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - ((v - min) / range) * h * 0.8 - h * 0.1
  ])
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${p[1]}`).join(' ')
  const area = path + ` L${w},${h} L0,${h} Z`

  return (
    <svg ref={ref} width={w} height={h} style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id={`g${color.replace('#','')}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.3" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#g${color.replace('#','')})`} />
      <path d={path} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
}

export default function StatsGrid() {
  return (
    <div style={{ background: '#0A0A0A', padding: 32 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
        {stats.map(s => (
          <div key={s.label} style={{ background: '#111', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 14, padding: '20px 24px', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: s.color, opacity: 0.6 }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
              <div style={{ color: '#666', fontSize: 12, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.label}</div>
              <Sparkline data={s.data} color={s.color} />
            </div>
            <div style={{ color: '#F5F5F0', fontSize: 28, fontWeight: 900, letterSpacing: '-1px', marginBottom: 6 }}>{s.value}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: s.up ? '#22c55e' : '#ef4444', fontSize: 13, fontWeight: 600 }}>
              <span>{s.up ? '↑' : '↓'}</span>
              <span>{s.delta}</span>
              <span style={{ color: '#555', fontWeight: 400, marginLeft: 4 }}>vs last month</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

About

Dashboard stats grid with trend arrows, sparkline charts, and percentage changes