react/components/StatsGrid.tsx - gemini-react - ivaninvv/dashboard

react/components/StatsGrid.tsx
86 строк2 KB
VladimirIvanin
react
30 ноя 2025, 03:42
30 ноя 2025, 03:4245b555a
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Icons } from './icons';

interface StatCardProps {
  title: string;
  value: string;
  trend: string;
  trendUp: boolean;
  icon: React.ElementType;
  color: string;
  bg: string;
}

const StatCard = ({ title, value, trend, trendUp, icon: Icon, color, bg }: StatCardProps) => (
  <Card className="border-none shadow-card hover:shadow-lg transition-shadow duration-300">
    <CardContent className="p-6">
      <div className="flex items-start justify-between">
         <div className="flex flex-col">
            <h5 className="text-dark font-semibold text-lg mb-1">{title}</h5>
            <h4 className="text-2xl font-bold text-dark mb-2">{value}</h4>
             <div className="flex items-center gap-2">
                <span className={`flex items-center justify-center w-5 h-5 rounded-full ${trendUp ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'}`}>
                     {trendUp ? <Icons.ArrowUp className="w-3 h-3" /> : <Icons.ArrowDown className="w-3 h-3" />}
                </span>
                <span className="text-muted text-sm font-medium">{trend} last year</span>
             </div>
         </div>
        <div className={`w-12 h-12 rounded-full flex items-center justify-center ${bg} ${color}`}>
          <Icon className="w-6 h-6" />
        </div>
      </div>
    </CardContent>
  </Card>
);

const StatsGrid = () => {
  const stats = [
    {
      title: "Employees",
      value: "96",
      trend: "+9%",
      trendUp: true,
      icon: Icons.Users,
      color: "text-primary",
      bg: "bg-primary/20"
    },
    {
      title: "Clients",
      value: "3,650",
      trend: "-12%",
      trendUp: false,
      icon: Icons.Users,
      color: "text-warning",
      bg: "bg-warning/20"
    },
    {
      title: "Projects",
      value: "356",
      trend: "+8%",
      trendUp: true,
      icon: Icons.Cart,
      color: "text-secondary",
      bg: "bg-secondary/20"
    },
    {
      title: "Events",
      value: "696",
      trend: "+12%",
      trendUp: true,
      icon: Icons.DollarSign,
      color: "text-danger",
      bg: "bg-danger/20"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[30px]">
      {stats.map((stat, i) => (
        <StatCard key={i} {...stat} />
      ))}
    </div>
  );
};

export default StatsGrid;