Spaces:
Runtime error
Runtime error
File size: 2,849 Bytes
32c4f08 | 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 | import { deleteDocument } from '../services/api';
export default function DocumentList({ documents, onDocumentDeleted, isLoading }) {
const handleDelete = async (docId, filename) => {
if (!confirm(`Delete "${filename}" and all its data?`)) return;
try {
await deleteDocument(docId);
onDocumentDeleted?.(docId);
} catch (err) {
alert(`Failed to delete: ${err.message}`);
}
};
if (isLoading) {
return (
<div className="document-list">
<h3 className="section-title">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
</svg>
Documents
</h3>
<div className="loading-shimmer">
<div className="shimmer-line"></div>
<div className="shimmer-line short"></div>
</div>
</div>
);
}
return (
<div className="document-list">
<h3 className="section-title">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
</svg>
Documents
{documents.length > 0 && (
<span className="doc-count">{documents.length}</span>
)}
</h3>
{documents.length === 0 ? (
<div className="no-documents">
<p>No documents yet</p>
<p className="hint">Upload a PDF to get started</p>
</div>
) : (
<ul className="doc-items">
{documents.map((doc) => (
<li key={doc.id} className="doc-item">
<div className="doc-info">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
</svg>
<span className="doc-name" title={doc.filename}>
{doc.filename}
</span>
</div>
<button
className="delete-btn"
onClick={() => handleDelete(doc.id, doc.filename)}
title="Delete document"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points="3 6 5 6 21 6" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
</svg>
</button>
</li>
))}
</ul>
)}
</div>
);
}
|