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

react/components/RecentActivity.tsx
86 строк3 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';

const RecentActivity = () => {
  const activities = [
    {
      time: "09:30",
      text: "Payment received from John Doe of $385.90",
      color: "border-primary",
      dot: "bg-primary",
      bg: "bg-primary/10 text-primary"
    },
    {
      time: "10:00",
      text: "New Sale recorded #ML-3467",
      color: "border-secondary",
      dot: "bg-secondary",
      bg: "bg-secondary/10 text-secondary"
    },
    {
      time: "12:00",
      text: "Payment was made of $64.95 to Michael",
      color: "border-success",
      dot: "bg-success",
      bg: "bg-success/10 text-success"
    },
    {
      time: "09:30",
      text: "New Sale recorded #ML-3467",
      color: "border-warning",
      dot: "bg-warning",
      bg: "bg-warning/10 text-warning"
    },
    {
      time: "09:30",
      text: "Project Meeting",
      color: "border-danger",
      dot: "bg-danger",
      bg: "bg-danger/10 text-danger"
    },
    {
      time: "12:00",
      text: "Payment received from John Doe of $385.90",
      color: "border-primary",
      dot: "bg-primary",
      bg: "bg-primary/10 text-primary"
    },
  ];

  return (
    <Card className="h-full border-none shadow-card">
      <CardHeader className="px-6 pt-6 pb-0">
        <CardTitle className="text-lg font-bold text-dark">Monthly Earnings</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <div className="relative space-y-0">
          {activities.map((activity, i) => (
            <div key={i} className="flex gap-4 pb-8 last:pb-0 relative">
              {/* Timeline Line */}
              {i !== activities.length - 1 && (
                  <div className="absolute left-[85px] top-4 bottom-0 w-[2px] bg-border z-0"></div>
              )}
              
              <div className="w-[75px] text-right flex-shrink-0">
                 <p className="text-sm font-medium text-dark">{activity.time} am</p>
              </div>
              
              <div className="relative z-10 flex-shrink-0">
                  <div className={`w-5 h-5 rounded-full border-[3px] border-white ring-1 ring-border flex items-center justify-center bg-white`}>
                      <div className={`w-2.5 h-2.5 rounded-full ${activity.dot}`}></div>
                  </div>
              </div>
              
              <div className="pb-1">
                 <p className="text-sm text-muted">{activity.text}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

export default RecentActivity;