Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: Resolve redundant quiz titles by merging them into the page header
All checks were successful
Automated Container Build / build-and-push (push) Successful in 55s
Details

Browse source
This commit is contained in:
Elijah 2026-06-28 12:32:43 -07:00
parent d3d094e442
commit 2457bfcb39
3 changed files with 64 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/app/(protected)/[classSlug]/quizzes/[quizId]/page.tsx
View file

@ -107,6 +107,11 @@ export default function QuizStudyPage() {
fetchQuizAndAttempts();
}, [fetchQuizAndAttempts]);
const [showTopics, setShowTopics] = useState(false);
const categories = quiz
? Array.from(new Set(quiz.questions.map(q => q.category.toUpperCase()))).join(" · ")
: "";
if (loading || !quiz) {
return (
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@ -121,25 +126,46 @@ export default function QuizStudyPage() {
return (
<div className="max-w-4xl mx-auto w-full py-2 md:py-4">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<div className="flex flex-col md:flex-row items-start justify-between gap-4 mb-6">
<div>
<button
onClick={() => router.push(`/${classSlug}/quizzes`)}
className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-heading mb-2 transition-colors cursor-pointer"
className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-heading mb-4 transition-colors cursor-pointer"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Back to quizzes
</button>
<h1 className="text-xl font-bold text-text-heading">{quiz.name}</h1>
<button
onClick={() => setShowTopics(!showTopics)}
className="flex items-center gap-2 group cursor-pointer text-left focus:outline-none mb-2"
>
<h1 className="text-3xl font-bold font-serif text-text-heading group-hover:text-primary transition-colors">
{quiz.name}
</h1>
<svg
className={`w-6 h-6 text-text-muted transition-transform duration-200 ${showTopics ? "rotate-180" : ""}`}
fill="none" viewBox="0 0 24 24" stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{showTopics && (
<div className="text-sm tracking-widest text-text-muted font-medium mb-3 animate-in fade-in slide-in-from-top-2 duration-200 leading-relaxed">
{categories}
</div>
)}
{quiz.description && (
<p className="text-sm text-text-secondary mt-1">{quiz.description}</p>
)}
</div>
{/* View toggle & Share */}
<div className="flex items-center gap-2 md:gap-4">
<div className="flex items-center gap-2 md:gap-4 self-end md:self-auto md:mt-10">
{view === "take" && (
<button
onClick={handleRestart}