Upload components/DataFetcher.js with huggingface_hub

components/DataFetcher.js

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+
+export default function DataFetcher() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/status');
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const result = await response.json();
+      setData(result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-gray-50 dark:bg-gray-900 p-6 rounded-xl border border-gray-200 dark:border-gray-700">
+      <h3 className="text-xl font-semibold mb-4 text-gray-800 dark:text-white flex items-center gap-2">
+        API Interaction Demo
+      </h3>
+      
+      <button 
+        onClick={fetchData}
+        disabled={loading}
+        className="w-full sm:w-auto bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-medium py-2 px-6 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {loading ? 'Loading...' : 'Check System Status'}
+      </button>
+
+      {error && (
+        <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg">
+          Error: {error}
+        </div>
+      )}
+
+      {data && !loading && (
+        <div className="mt-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <h4 className="font-bold text-green-600 dark:text-green-400 mb-2">Response Received:</h4>
+          <div className="space-y-2 text-sm font-mono text-gray-700 dark:text-gray-300">
+            <p><span className="font-bold">Status:</span> {data.status}</p>
+            <p><span className="font-bold">Message:</span> {data.message}</p>
+            <p><span className="font-bold">Timestamp:</span> {data.timestamp}</p>
+            <p><span className="font-bold">Uptime:</span> {Math.floor(data.uptime)}s</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}