File size: 1,957 Bytes
65d68f5 | 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 | import type { PracticeQuestion } from "@/content/seo/types";
export function PracticeQuestions({
questions,
}: {
questions: PracticeQuestion[];
}) {
if (questions.length === 0) return null;
return (
<section className="mt-10">
<h2 className="text-xl font-bold text-[var(--text-primary)] mb-4">
Practice Questions
</h2>
<div className="space-y-4">
{questions.map((q, i) => (
<details
key={i}
className="group rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)]"
>
<summary className="cursor-pointer px-5 py-4 text-sm font-semibold text-[var(--text-primary)] select-none list-none flex items-start justify-between gap-3">
<span className="flex gap-2">
<span className="text-[var(--text-muted)] shrink-0">
Q{i + 1}.
</span>
<span>{q.question}</span>
</span>
<span className="flex items-center gap-2 shrink-0">
{q.marks && (
<span className="text-xs text-[var(--text-muted)] px-1.5 py-0.5 rounded bg-[var(--bg-hover)]">
{q.marks}m
</span>
)}
<svg
className="w-4 h-4 text-[var(--text-muted)] transition-transform group-open:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</span>
</summary>
<div className="px-5 pb-4 text-sm leading-relaxed text-[var(--text-secondary)] border-t border-[var(--border-subtle)] pt-3 ml-8">
{q.answer}
</div>
</details>
))}
</div>
</section>
);
}
|