Update signup success message and clean up workspace
This commit is contained in:
198
src/components/AI/MistakeReviewCard.tsx
Normal file
198
src/components/AI/MistakeReviewCard.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Flame } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkMath from 'remark-math'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
import 'katex/dist/katex.min.css'
|
||||
|
||||
export interface MistakePayload {
|
||||
mistake: {
|
||||
id: string
|
||||
user_id: string
|
||||
question_id: string
|
||||
error_type: string
|
||||
topic: string
|
||||
subtopic: string
|
||||
review_count: number
|
||||
consecutive_correct: number
|
||||
is_mastered: boolean
|
||||
}
|
||||
question: {
|
||||
id: string
|
||||
subject: string
|
||||
question_text: string
|
||||
options: Record<string, string>
|
||||
correct_answer: { correct: string }
|
||||
solution_text: string
|
||||
}
|
||||
}
|
||||
|
||||
interface MistakeReviewCardProps {
|
||||
data: MistakePayload
|
||||
onNext: () => void
|
||||
onSubmitReview: (mistakeId: string, selectedAnswer: string) => Promise<{is_correct: boolean, correct_answer: string}>
|
||||
}
|
||||
|
||||
export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeReviewCardProps) {
|
||||
const [selected, setSelected] = useState<string | null>(null)
|
||||
const [result, setResult] = useState<'success' | 'error' | null>(null)
|
||||
const [correctAnswer, setCorrectAnswer] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const handleCheck = async () => {
|
||||
if (!selected) return;
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const res = await onSubmitReview(data.mistake.id, selected)
|
||||
setResult(res.is_correct ? 'success' : 'error')
|
||||
setCorrectAnswer(res.correct_answer)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
setSelected(null)
|
||||
setResult(null)
|
||||
setCorrectAnswer(null)
|
||||
onNext()
|
||||
}
|
||||
|
||||
const { mistake, question } = data;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-between items-center pb-1">
|
||||
<h2 className="text-base font-bold text-primary flex items-center gap-2">
|
||||
♻️ Spaced Repetition Queue
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Spaced Repetition Timeline */}
|
||||
<div className="flex justify-between items-center relative py-4 px-2">
|
||||
<div className="absolute top-1/2 left-0 right-0 h-0.5 bg-secondary -translate-y-1/2 z-0" />
|
||||
<div className="absolute top-1/2 left-0 w-1/2 h-0.5 bg-[#00F0FF] -translate-y-1/2 z-0" />
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center gap-1.5 opacity-60">
|
||||
<div className="w-3.5 h-3.5 rounded-full bg-[#00F0FF] border-2 border-background" />
|
||||
<span className="text-xs font-bold text-[#00F0FF]">Attempt 1</span>
|
||||
<span className="text-[11px] text-muted-foreground font-semibold">10 Jul</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center gap-1.5 opacity-60">
|
||||
<div className="w-3.5 h-3.5 rounded-full bg-[#00F0FF] border-2 border-background" />
|
||||
<span className="text-xs font-bold text-[#00F0FF]">Attempt 2</span>
|
||||
<span className="text-[11px] text-muted-foreground font-semibold">14 Jul</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center gap-1.5 scale-110">
|
||||
<div className="w-4 h-4 rounded-full border-[3px] border-[#00F0FF] bg-background shadow-[0_0_10px_rgba(0,240,255,0.5)]" />
|
||||
<span className="text-sm font-bold text-[#00F0FF]">Today</span>
|
||||
<span className="text-xs text-muted-foreground font-semibold">19 Jul</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center gap-1.5 opacity-50">
|
||||
<div className="w-3.5 h-3.5 rounded-full bg-secondary border-2 border-background" />
|
||||
<span className="text-xs font-bold text-muted-foreground">Mastery</span>
|
||||
<span className="text-[11px] text-muted-foreground font-semibold">26 Jul</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mistake Card */}
|
||||
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[540px] h-full relative overflow-hidden flex flex-col justify-between group hover:border-[#00F0FF]/30 transition-colors">
|
||||
<CardContent className="p-6 flex-1 flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="text-xs font-bold px-3 py-1 rounded-md bg-white/5 border border-border text-muted-foreground uppercase tracking-widest">
|
||||
{mistake.topic}
|
||||
</span>
|
||||
<span className="text-xs font-bold text-red-500 bg-red-500/10 px-2.5 py-1 rounded-md">
|
||||
{mistake.error_type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none text-base md:text-lg mb-6 font-medium text-foreground leading-relaxed">
|
||||
<ReactMarkdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
|
||||
{question.question_text}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-auto">
|
||||
{Object.entries(question.options).map(([letter, text]) => {
|
||||
const isSelected = selected === letter
|
||||
|
||||
let btnClass = "border-border bg-white/5 hover:bg-white/10 hover:border-border text-muted-foreground"
|
||||
|
||||
if (result) {
|
||||
if (letter === correctAnswer) {
|
||||
btnClass = "border-green-500 bg-green-500/10 text-green-500 shadow-[0_0_15px_rgba(34,197,94,0.15)]"
|
||||
} else if (isSelected && letter !== correctAnswer) {
|
||||
btnClass = "border-red-500 bg-red-500/10 text-red-500"
|
||||
}
|
||||
} else if (isSelected) {
|
||||
btnClass = "border-[#00F0FF] bg-[#00F0FF]/10 text-[#00F0FF] shadow-[0_0_15px_rgba(0,240,255,0.15)]"
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={letter}
|
||||
onClick={() => !result && setSelected(letter)}
|
||||
disabled={!!result || isSubmitting}
|
||||
className={`text-left p-4 rounded-xl border-[1.5px] transition-all text-base md:text-lg font-bold flex gap-3.5 items-center ${btnClass}`}
|
||||
>
|
||||
<span className="font-bold opacity-70">{letter})</span>
|
||||
<span className="flex-1">
|
||||
<ReactMarkdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{text}</ReactMarkdown>
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
{!result ? (
|
||||
<div className="mt-5 flex justify-end">
|
||||
<button
|
||||
onClick={handleCheck}
|
||||
disabled={!selected || isSubmitting}
|
||||
className="px-6 py-2.5 rounded-md font-bold text-sm bg-gradient-to-r from-[#00F0FF] to-teal-400 text-background hover:opacity-90 transition-opacity disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? "Checking..." : "Submit Answer"}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Solution Block */}
|
||||
<div className="mt-5 p-4 rounded-xl border border-[#00F0FF]/20 bg-[#00F0FF]/5">
|
||||
<h4 className="text-[13px] font-bold text-[#00F0FF] mb-2 flex items-center gap-2">
|
||||
<Flame size={16} className="fill-[#00F0FF]/20" />
|
||||
AI Coach Explanation
|
||||
</h4>
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none text-[13px] text-muted-foreground leading-relaxed [&>p]:m-0">
|
||||
<ReactMarkdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
|
||||
{question.solution_text}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex justify-end">
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="px-6 py-2.5 rounded-md font-bold text-sm bg-gradient-to-r from-[#00F0FF] to-teal-400 text-background hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Got It, Next Question →
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user