Spaces:
Paused
Paused
| import { useState } from "react"; | |
| interface ParsedDataSummaryProps { | |
| parsedData: Record<string, unknown>; | |
| } | |
| export function ParsedDataSummary({ parsedData }: ParsedDataSummaryProps) { | |
| const [expanded, setExpanded] = useState(false); | |
| const questions = parsedData.questions as { questions?: unknown[] } | undefined; | |
| const students = parsedData.student_answers as { students?: unknown[] } | undefined; | |
| const answers = parsedData.teacher_answers as { answers?: unknown[] } | undefined; | |
| const qCount = questions?.questions?.length ?? 0; | |
| const sCount = students?.students?.length ?? 0; | |
| const aCount = answers?.answers?.length ?? 0; | |
| return ( | |
| <div className="card p-4"> | |
| <button | |
| onClick={() => setExpanded(!expanded)} | |
| className="w-full flex items-center justify-between text-left" | |
| > | |
| <div className="flex items-center gap-4"> | |
| <h3 className="font-display text-sm font-semibold text-[var(--color-text)]"> | |
| 已解析資料 | |
| </h3> | |
| <div className="flex gap-3 text-xs"> | |
| {qCount > 0 && <span className="badge badge-success">📝 {qCount} 題</span>} | |
| {sCount > 0 && <span className="badge badge-success">👨🎓 {sCount} 位學生</span>} | |
| {aCount > 0 && <span className="badge badge-success">✅ {aCount} 答案</span>} | |
| </div> | |
| </div> | |
| <span className="text-[var(--color-text-muted)] text-lg"> | |
| {expanded ? "▲" : "▼"} | |
| </span> | |
| </button> | |
| {expanded && ( | |
| <div className="mt-4 pt-4 border-t border-[var(--color-border)] text-sm max-h-64 overflow-y-auto"> | |
| <pre className="text-[var(--color-text-muted)] whitespace-pre-wrap break-words"> | |
| {JSON.stringify(parsedData, null, 2)} | |
| </pre> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |