45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
|
|
import type { HomeworkAssignmentQuestionAnalytics } from "@/modules/homework/types"
|
|
import { HomeworkAssignmentExamPreviewPane } from "@/modules/homework/components/homework-assignment-exam-preview-pane"
|
|
import { HomeworkAssignmentQuestionErrorDetailPanel } from "@/modules/homework/components/homework-assignment-question-error-detail-panel"
|
|
|
|
export function HomeworkAssignmentExamErrorExplorer({
|
|
structure,
|
|
questions,
|
|
gradedSampleCount,
|
|
heightClassName = "h-[560px]",
|
|
}: {
|
|
structure: unknown
|
|
questions: HomeworkAssignmentQuestionAnalytics[]
|
|
gradedSampleCount: number
|
|
heightClassName?: string
|
|
}) {
|
|
const firstQuestionId = questions[0]?.questionId ?? null
|
|
const [selectedQuestionId, setSelectedQuestionId] = useState<string | null>(firstQuestionId)
|
|
|
|
const selected = useMemo(() => {
|
|
if (!selectedQuestionId) return null
|
|
return questions.find((q) => q.questionId === selectedQuestionId) ?? null
|
|
}, [questions, selectedQuestionId])
|
|
|
|
return (
|
|
<div className={`grid grid-cols-1 gap-0 md:grid-cols-3 ${heightClassName} divide-y md:divide-y-0 md:divide-x border rounded-md bg-background overflow-hidden`}>
|
|
<HomeworkAssignmentExamPreviewPane
|
|
structure={structure}
|
|
questions={questions.map((q) => ({
|
|
questionId: q.questionId,
|
|
questionType: q.questionType,
|
|
questionContent: q.questionContent,
|
|
maxScore: q.maxScore,
|
|
}))}
|
|
selectedQuestionId={selectedQuestionId}
|
|
onQuestionSelect={setSelectedQuestionId}
|
|
/>
|
|
<HomeworkAssignmentQuestionErrorDetailPanel selected={selected} gradedSampleCount={gradedSampleCount} />
|
|
</div>
|
|
)
|
|
}
|