Spaces:
Running
Running
File size: 2,697 Bytes
a17d02d 11042de a17d02d 9000908 a17d02d 9e2df12 be8595f a17d02d 9e2df12 a17d02d 9e2df12 a17d02d 9000908 9e2df12 9000908 a17d02d 9000908 a17d02d 11042de a17d02d 11042de a17d02d 11042de a17d02d | 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 | import Send from 'lucide-react/dist/esm/icons/send'
import Spinner from '../shared/Spinner'
import { getQStatus, STATUS_CLASS } from '../../utils/testEngineUtils'
import { Button } from '@/components/ui/button'
export default function TestSidebar({
answered,
answers,
currentQuestion,
marked,
notAnswered,
onQuestionSelect,
onSubmitClick,
questionGroups,
questions,
submitting,
visited,
}) {
return (
<>
<div className="p-3 border-b text-center border-border">
<div className="w-9 h-9 rounded-full bg-primary flex items-center justify-center mx-auto mb-1">
<span className="text-foreground font-bold text-sm">U</span>
</div>
</div>
<div className="p-2 border-b space-y-1.5 border-border">
{[
['q-dot-answered', `Answered (${answered})`],
['q-dot-not-answered', `Not Answered (${notAnswered})`],
['q-dot-not-visited', `Not Visited (${questions.length - visited.size})`],
['q-dot-marked', `Marked (${marked.size})`],
].map(([cls, label]) => (
<div key={label} className="flex items-center gap-2">
<div className={`q-dot w-6 h-6 text-[9px] ${cls}`} />
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>
{[...questionGroups.entries()].map(([subject, items]) => (
<div key={subject} className="p-2 border-b border-border">
<p className="text-xs font-semibold mb-2 truncate text-foreground">{subject}</p>
<div className="grid grid-cols-5 gap-1">
{items.map(({ question, index: questionIndex }) => {
const isCurrent = question.id === currentQuestion?.id
const status = isCurrent
? 'current'
: !visited.has(question.id)
? 'not-visited'
: getQStatus(question.id, currentQuestion?.id, answers, marked)
return (
<button
key={question.id}
onClick={() => onQuestionSelect(questionIndex)}
className={STATUS_CLASS[status] || STATUS_CLASS['not-visited']}
>
{questionIndex + 1}
</button>
)
})}
</div>
</div>
))}
<div className="p-2 mt-auto">
<Button
onClick={onSubmitClick}
disabled={submitting}
size="sm"
className="w-full flex items-center justify-center gap-1.5 text-xs py-2"
>
{submitting ? <Spinner size={12} /> : <Send size={12} />} Submit Test
</Button>
</div>
</>
)
}
|