Spaces:
Sleeping
Sleeping
File size: 4,178 Bytes
c187f58 |
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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import { useState, useEffect } from 'react';
import { Database, Plus, Trash2, RefreshCw } from 'lucide-react';
export default function PocketBase() {
const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState('');
const [loading, setLoading] = useState(false);
const [actionLoading, setActionLoading] = useState(false);
const fetchItems = async () => {
setLoading(true);
try {
const res = await fetch('/api/pocketbase');
const data = await res.json();
setItems(data.items || []);
} catch (error) {
console.error('Failed to fetch items');
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchItems();
}, []);
const addItem = async () => {
if (!newItem.trim()) return;
setActionLoading(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 {
setActionLoading(false);
}
};
const deleteItem = async (id) => {
setActionLoading(true);
try {
const res = await fetch('/api/pocketbase', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id }),
});
if (res.ok) {
fetchItems();
}
} catch (error) {
console.error('Failed to delete item');
} finally {
setActionLoading(false);
}
};
return (
<div className="bg-slate-800 rounded-xl p-6 shadow-xl border border-slate-700">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<Database className="w-5 h-5 text-emerald-500" />
<h2 className="text-lg font-semibold text-white">PocketBase Manager</h2>
</div>
<button
onClick={fetchItems}
disabled={loading}
className="text-slate-400 hover:text-white transition-colors p-1 rounded-md hover:bg-slate-700"
title="Refresh"
>
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
</button>
</div>
<div className="flex gap-2 mb-6">
<input
type="text"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && addItem()}
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={actionLoading}
className="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-lg transition-colors disabled:opacity-50 flex items-center justify-center"
>
<Plus className="w-5 h-5" />
</button>
</div>
<div className="space-y-2 max-h-64 overflow-y-auto pr-2">
{loading ? (
<p className="text-slate-500 text-sm text-center py-4">Loading records...</p>
) : items.length === 0 ? (
<p className="text-slate-500 text-sm text-center py-4">No records found</p>
) : (
items.map((item) => (
<div
key={item.id}
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 truncate mr-2">{item.name || item.id}</span>
<button
onClick={() => deleteItem(item.id)}
className="text-red-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-red-300 p-1 hover:bg-red-900/30 rounded"
title="Delete"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
))
)}
</div>
</div>
);
} |