Spaces:
Sleeping
Sleeping
File size: 2,867 Bytes
4dab19a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 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>
);
} |