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

feat: Add list view for shared flashcards and fix restart button layout
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:04:19 -07:00
parent 7d2c466e9b
commit e4b32c6bf2
2 changed files with 105 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/app/shared/[classSlug]/[type]/[token]/SharedViewer.tsx
View file

@ -3,6 +3,7 @@
import { useState } from "react";
import { FlashcardViewer } from "@/components/flashcards/FlashcardViewer";
import { QuizViewer } from "@/components/quizzes/QuizViewer";
import { CardList } from "@/components/flashcards/CardList";
interface SharedViewerProps {
type: string;
@ -11,6 +12,7 @@ interface SharedViewerProps {
export function SharedViewer({ type, data }: SharedViewerProps) {
const [restartKey, setRestartKey] = useState(0);
const [view, setView] = useState<"study" | "list">("study");
return (
<div>
@ -29,26 +31,57 @@ export function SharedViewer({ type, data }: SharedViewerProps) {
)}
</div>
<div>
<button
onClick={() => setRestartKey(k => k + 1)}
className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
title="Restart Session"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
<div className="flex items-center gap-2 md:gap-4 self-end md:self-auto">
{view === "study" && (
<button
onClick={() => setRestartKey(k => k + 1)}
className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
title="Restart Session"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
)}
{type === "flashcards" && (
<div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
<button
onClick={() => setView("study")}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
view === "study"
? "bg-bg-surface text-text-heading shadow-sm"
: "text-text-muted hover:text-text-heading"
}`}
>
Study
</button>
<button
onClick={() => setView("list")}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
view === "list"
? "bg-bg-surface text-text-heading shadow-sm"
: "text-text-muted hover:text-text-heading"
}`}
>
List
</button>
</div>
)}
</div>
</div>
{type === "flashcards" ? (
<FlashcardViewer
key={restartKey}
cards={data.cards}
deckId={data.id}
isShared={true}
/>
view === "study" ? (
<FlashcardViewer
key={restartKey}
cards={data.cards}
deckId={data.id}
isShared={true}
/>
) : (
<CardList cards={data.cards} />
)
) : (
<QuizViewer
key={restartKey}