← back to Handbag Auth Nextjs

src/components/StatsBar.tsx

43 lines

'use client'

interface StatsBarProps {
  stats: {
    total_listings: number
    total_deals: number
    avg_deal_percentage: number
    best_deal_percentage: number
    brands: number
  }
}

export function StatsBar({ stats }: StatsBarProps) {
  return (
    <div className="bg-gradient-to-r from-purple-600 to-blue-500 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          <div className="text-center">
            <p className="text-3xl font-bold">{stats.total_listings.toLocaleString()}</p>
            <p className="text-sm opacity-90">Total Listings</p>
          </div>
          <div className="text-center">
            <p className="text-3xl font-bold">{stats.total_deals.toLocaleString()}</p>
            <p className="text-sm opacity-90">Active Deals</p>
          </div>
          <div className="text-center">
            <p className="text-3xl font-bold">{stats.avg_deal_percentage}%</p>
            <p className="text-sm opacity-90">Avg Discount</p>
          </div>
          <div className="text-center">
            <p className="text-3xl font-bold">{stats.best_deal_percentage}%</p>
            <p className="text-sm opacity-90">Best Deal</p>
          </div>
          <div className="text-center">
            <p className="text-3xl font-bold">{stats.brands}</p>
            <p className="text-sm opacity-90">Brands</p>
          </div>
        </div>
      </div>
    </div>
  )
}