Upload components/PocketBase.js with huggingface_hub

components/PocketBase.js

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import { Database, Plus, Trash2 } from 'lucide-react';
+
+export default function PocketBase() {
+  const [items, setItems] = useState([]);
+  const [newItem, setNewItem] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // Simulate fetching data on mount
+  useEffect(() => {
+    fetchItems();
+  }, []);
+
+  const fetchItems = async () => {
+    try {
+      const res = await fetch('/api/pocketbase');
+      const data = await res.json();
+      setItems(data.items || []);
+    } catch (error) {
+      console.error('Failed to fetch items');
+    }
+  };
+
+  const addItem = async () => {
+    if (!newItem.trim()) return;
+    setLoading(true);
+    try {
+      const res = await fetch('/api/pocketbase', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newItem }),
+      });
+      if (res.ok) {
+        setNewItem('');
+        fetchItems();
+      }
+    } catch (error) {
+      console.error('Failed to add item');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-slate-800 rounded-xl p-6 shadow-xl border border-slate-700">
+      <div className="flex items-center gap-2 mb-4">
+        <Database className="w-5 h-5 text-emerald-500" />
+        <h2 className="text-lg font-semibold text-white">PocketBase Manager</h2>
+      </div>
+
+      <div className="flex gap-2 mb-6">
+        <input
+          type="text"
+          value={newItem}
+          onChange={(e) => setNewItem(e.target.value)}
+          placeholder="Add new record..."
+          className="flex-1 bg-slate-900 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-500 focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none"
+        />
+        <button
+          onClick={addItem}
+          disabled={loading}
+          className="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-lg transition-colors disabled:opacity-50"
+        >
+          <Plus className="w-5 h-5" />
+        </button>
+      </div>
+
+      <div className="space-y-2 max-h-64 overflow-y-auto">
+        {items.length === 0 ? (
+          <p className="text-slate-500 text-sm text-center py-4">No records found</p>
+        ) : (
+          items.map((item, index) => (
+            <div 
+              key={index} 
+              className="flex items-center justify-between bg-slate-900 p-3 rounded-lg border border-slate-700 group hover:border-slate-500 transition-colors"
+            >
+              <span className="text-slate-300">{item.name || item.id}</span>
+              <button className="text-red-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-red-300">
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}