`cypressaward/frontend/components/home/stats-section.tsx`

66 lines
'use client'

import { Card } from '@/components/ui/card'
import { TrendingUp, Users, Building2, DollarSign } from 'lucide-react'

interface Stat {
  label: string
  value: string
  change?: string
  icon: React.ElementType
  color: string
}

const stats: Stat[] = [
  {
    label: 'Active Cases',
    value: '248',
    change: '+12%',
    icon: TrendingUp,
    color: 'text-blue-600'
  },
  {
    label: 'Total Awards (2024)',
    value: '$127M',
    change: '+34%',
    icon: DollarSign,
    color: 'text-green-600'
  },
  {
    label: 'Registered Nonprofits',
    value: '1,842',
    change: '+89',
    icon: Users,
    color: 'text-purple-600'
  },
  {
    label: 'Partner Law Firms',
    value: '156',
    change: '+7',
    icon: Building2,
    color: 'text-orange-600'
  }
]

export function StatsSection() {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {stats.map((stat) => (
        <Card key={stat.label} className="p-4">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-gray-600">{stat.label}</p>
              <p className="text-2xl font-bold mt-1">{stat.value}</p>
              {stat.change && (
                <p className="text-xs text-green-600 mt-1">
                  {stat.change} this month
                </p>
              )}
            </div>
            <stat.icon className={`h-8 w-8 ${stat.color} opacity-20`} />
          </div>
        </Card>
      ))}
    </div>
  )
}