A flashcard study component that schedules each card's next review with the SM-2 spaced-repetition algorithm, previewing the interval each grade button would set and charting upcoming reviews.
"use client";
import {
SpacedRepetition,
spacedRepetitionCard,
type SpacedRepetitionCard,
} from "@/components/ui/spaced-repetition";
import { useState } from "react";
// Fixed clock + local synthetic deck, so the schedule renders deterministically.
const NOW = new Date("2024-06-10T09:00:00").getTime();
const INITIAL_DECK: SpacedRepetitionCard[] = [
spacedRepetitionCard("1", "Capital of Japan?", "Tokyo"),
spacedRepetitionCard("2", "Chemical formula for water?", "H2O"),
spacedRepetitionCard("3", 'Author of "1984"?', "George Orwell"),
spacedRepetitionCard("4", "Largest planet in the solar system?", "Jupiter"),
spacedRepetitionCard("5", "Approximate speed of light?", "300,000 km/s"),
];
export default function SpacedRepetitionDemo() {
const [cards, setCards] = useState<SpacedRepetitionCard[]>(INITIAL_DECK);
return (
<div className="flex w-full items-center justify-center bg-background p-6 text-foreground">
<SpacedRepetition cards={cards} onCardsChange={setCards} now={NOW} />
</div>
);
}