| 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> | |
| ); | |
| } | |