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

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

const ProductPerformance = () => {
  const products = [
    {
      id: 1,
      name: "Sunil Joshi",
      role: "Web Designer",
      image: "user-1.jpg",
      project: "Elite Admin",
      priority: "Low",
      budget: "$3.9",
      color: "bg-secondary text-white" 
    },
    {
      id: 2,
      name: "Andrew McDownland",
      role: "Project Manager",
      image: "user-2.jpg",
      project: "Real Homes WP Theme",
      priority: "Medium",
      budget: "$24.5",
      color: "bg-primary text-white"
    },
    {
      id: 3,
      name: "Christopher Jamil",
      role: "Project Manager",
      image: "user-3.jpg",
      project: "MedicalPro WP Theme",
      priority: "High",
      budget: "$12.8",
      color: "bg-danger text-white"
    },
    {
      id: 4,
      name: "Nirav Joshi",
      role: "Frontend Engineer",
      image: "user-4.jpg",
      project: "Hosting Press HTML",
      priority: "Critical",
      budget: "$2.4",
      color: "bg-success text-white" 
    },
  ];

  return (
    <Card className="col-span-1 lg:col-span-3 border-none shadow-card overflow-hidden">
      <CardHeader className="px-6 pt-6 pb-0">
        <CardTitle className="text-lg font-bold text-dark">Top Projects</CardTitle>
        <p className="text-sm text-muted mt-1">Best Products</p>
      </CardHeader>
      <CardContent className="overflow-auto p-0">
        <table className="w-full text-sm text-left">
          <thead className="text-xs font-semibold text-dark uppercase bg-transparent border-b border-border">
            <tr>
              <th className="px-6 py-4">Assigned</th>
              <th className="px-6 py-4">Name</th>
              <th className="px-6 py-4">Priority</th>
              <th className="px-6 py-4">Budget</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {products.map((product) => (
              <tr key={product.id} className="hover:bg-slate-50/50 transition-colors">
                <td className="px-6 py-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full overflow-hidden bg-slate-100 flex-shrink-0">
                      <img 
                        src={`/images/profile/${product.image}`}
                        alt={product.name}
                        className="w-full h-full object-cover"
                        onError={(e) => {
                          (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2UzZTNiMyI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PC9zdmc+';
                        }}
                      />
                    </div>
                    <div>
                      <p className="font-semibold text-dark text-sm">{product.name}</p>
                      <p className="text-xs text-muted">{product.role}</p>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-4">
                   <p className="text-sm text-muted font-medium">{product.project}</p>
                </td>
                <td className="px-6 py-4">
                  <Badge className={`border-none rounded-[4px] px-2 py-1 text-xs font-semibold ${
                    product.priority === 'Low' ? 'bg-secondary text-white' :
                    product.priority === 'Medium' ? 'bg-primary text-white' :
                    product.priority === 'High' ? 'bg-danger text-white' : 'bg-success text-white'
                  }`}>
                    {product.priority}
                  </Badge>
                </td>
                <td className="px-6 py-4 font-bold text-dark text-sm">{product.budget}k</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  );
};

export default ProductPerformance;