مشروع تطبيقي: لوحة تحكم كاملة

function RecentActivity() {
  const activities = [
    { icon: "➕", text: "Ahmed added a new product", time: "5 min ago" },
    { icon: "✏️", text: "Sara edited account settings", time: "1 hour ago" },
    { icon: "📦", text: "Omar completed an order", time: "2 hours ago" },
    { icon: "💬", text: "Fatima left a review", time: "3 hours ago" },
    { icon: "👥", text: "New user registered", time: "5 hours ago" },
  ];

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
      <div className="p-5 border-b border-gray-200 dark:border-gray-700">
        <h3 className="font-bold text-lg text-gray-800 dark:text-gray-200">Recent Activity</h3>
      </div>
      <div className="divide-y divide-gray-100 dark:divide-gray-700">
        {activities.map((act, i) => (
          <div key={i} className="flex items-center gap-4 p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
            <span className="text-xl">{act.icon}</span>
            <div className="flex-1">
              <p className="text-sm text-gray-800 dark:text-gray-200">{act.text}</p>
              <p className="text-xs text-gray-500 dark:text-gray-400">{act.time}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}