Upload components/Results.jsx with huggingface_hub

components/Results.jsx

@@ -0,0 +1,73 @@
+import { FiUser, FiBriefcase, FiMapPin, FiAlertCircle } from 'react-icons/fi';
+
+export default function Results({ data, loading, error }) {
+  if (loading) {
+    return (
+      <div className="text-center py-8">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+        <p className="text-gray-600">Carregando dados...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 border-l-4 border-red-500 p-4 rounded-md">
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <FiAlertCircle className="h-5 w-5 text-red-500" />
+          </div>
+          <div className="ml-3">
+            <p className="text-red-700">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        <FiAlertCircle className="mx-auto h-12 w-12 mb-4" />
+        <p>Nenhum resultado encontrado</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {data.map((agent, index) => (
+        <div key={index} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between">
+            <div className="flex items-center space-x-4 mb-4 md:mb-0">
+              <div className="bg-primary text-white rounded-full h-12 w-12 flex items-center justify-center font-bold text-xl">
+                {agent.name.charAt(0)}
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+                  <FiUser className="mr-2" /> {agent.name}
+                </h3>
+                <p className="text-gray-600 flex items-center">
+                  <FiBriefcase className="mr-2" /> {agent.position}
+                </p>
+              </div>
+            </div>
+            <div className="text-right">
+              <p className="text-gray-600 flex items-center justify-end md:justify-start">
+                <FiMapPin className="mr-2" /> {agent.location}
+              </p>
+              <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${agent.status === 'ativo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+                {agent.status}
+              </span>
+            </div>
+          </div>
+          {agent.details && (
+            <div className="mt-4 pt-4 border-t border-gray-200">
+              <p className="text-gray-700">{agent.details}</p>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}