import React, { useState, useMemo } from 'react';
// --- Sample Data: Torts Flashcards ---
const tortsDeck = {
subject: "Torts",
cards: [
{
question: "What are the four elements of negligence?",
answer: "1. Duty: A duty of reasonable care owed by the defendant to the plaintiff.\n2. Breach: The defendant breached that duty.\n3. Causation: The breach was the actual and proximate cause of the plaintiff's injury.\n4. Damages: The plaintiff suffered actual damages."
},
{
question: "Define 'res ipsa loquitur'.",
answer: "'The thing speaks for itself.' It's a doctrine that allows an inference of negligence when an accident occurs that wouldn't normally happen without negligence, the object causing the injury was in the defendant's exclusive control, and the plaintiff was not contributorily negligent."
},
{
question: "What is the 'eggshell skull' rule?",
answer: "A tort law doctrine holding that a defendant is liable for the full extent of a plaintiff's injuries, even if those injuries are unexpectedly severe due to the plaintiff's pre-existing vulnerability or condition. You take your victim as you find them."
},
{
question: "List the intentional torts against persons.",
answer: "1. Battery\n2. Assault\n3. False Imprisonment\n4. Intentional Infliction of Emotional Distress (IIED)"
},
{
question: "What is the difference between libel and slander?",
answer: "Both are forms of defamation. Libel is defamation in a permanent form (e.g., written, printed, recorded). Slander is spoken defamation. Damages are often presumed for libel but must be proven for slander, unless it is 'slander per se'."
}
]
};
// --- Helper Icon Components ---
const ChevronLeftIcon = () => (
);
const ChevronRightIcon = () => (
);
const ShuffleIcon = () => (
);
// --- Flashcard Component ---
const Flashcard = ({ card, isFlipped, onFlip }) => {
return (
{/* Front of the card */}
{card.question}
{/* Back of the card */}
{card.answer}
);
};
// --- Main App Component ---
export default function App() {
const [deck, setDeck] = useState(tortsDeck);
const [currentIndex, setCurrentIndex] = useState(0);
const [isFlipped, setIsFlipped] = useState(false);
const currentCard = useMemo(() => deck.cards[currentIndex], [deck, currentIndex]);
const handleNext = () => {
setIsFlipped(false); // Flip back to front for next card
setTimeout(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % deck.cards.length);
}, 150); // Short delay for flip animation
};
const handlePrev = () => {
setIsFlipped(false); // Flip back to front for previous card
setTimeout(() => {
setCurrentIndex((prevIndex) => (prevIndex - 1 + deck.cards.length) % deck.cards.length);
}, 150); // Short delay for flip animation
};
const handleShuffle = () => {
setIsFlipped(false);
setTimeout(() => {
const shuffledCards = [...deck.cards].sort(() => Math.random() - 0.5);
setDeck(prevDeck => ({ ...prevDeck, cards: shuffledCards }));
setCurrentIndex(0);
}, 150);
};
const handleFlip = () => {
setIsFlipped(!isFlipped);
};
return (