File size: 2,379 Bytes
9f87ec0 | 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 | import { useState, type ReactNode } from "react";
import { api, getErrorMessage } from "../api";
interface Props {
docId: string;
children: ReactNode;
}
export default function DocumentViewer({ docId, children }: Props) {
const [expanded, setExpanded] = useState(false);
const [fullText, setFullText] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
async function handleClick() {
if (expanded) {
setExpanded(false);
return;
}
if (fullText !== null) {
setExpanded(true);
return;
}
setLoading(true); setError("");
try {
const res = await api.getDocument(docId);
setFullText(res.text);
setExpanded(true);
} catch (err) {
setError(getErrorMessage(err));
} finally {
setLoading(false);
}
}
return (
<div>
<div onClick={handleClick}>
{children}
</div>
{loading && (
<div style={{ padding: "8px 12px", color: "var(--text-dim)", fontSize: "0.85rem" }}>
Loading document...
</div>
)}
{error && (
<div style={{ padding: "8px 12px", color: "var(--danger)", fontSize: "0.85rem" }}>
{error}
</div>
)}
{expanded && fullText !== null && (
<div style={{
background: "var(--bg-elevated, #0d1117)",
border: "1px solid var(--border)",
borderTop: "none",
borderRadius: "0 0 var(--radius) var(--radius)",
padding: "12px 16px",
marginTop: -4,
marginBottom: 8,
maxHeight: 400,
overflowY: "auto",
fontSize: "0.82rem",
lineHeight: 1.7,
whiteSpace: "pre-wrap",
wordBreak: "break-word",
color: "var(--text)",
}}>
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
<span style={{ fontWeight: 600 }}>{docId}</span>
<button
onClick={(e) => { e.stopPropagation(); setExpanded(false); }}
style={{
background: "none", border: "none", color: "var(--text-dim)",
cursor: "pointer", fontSize: "0.8rem",
}}>
Close
</button>
</div>
{fullText}
</div>
)}
</div>
);
}
|