diff --git a/frontend/src/components/questions/completion-indicator.tsx b/frontend/src/components/questions/completion-indicator.tsx new file mode 100644 index 0000000..a427378 --- /dev/null +++ b/frontend/src/components/questions/completion-indicator.tsx @@ -0,0 +1,26 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { CheckCircle } from "lucide-react"; +import { isQuestionCompleted } from "@/lib/progress"; + +interface CompletionIndicatorProps { + slug: string; +} + +export function CompletionIndicator({ slug }: CompletionIndicatorProps) { + const [completed, setCompleted] = useState(false); + + useEffect(() => { + setCompleted(isQuestionCompleted(slug)); + }, [slug]); + + if (!completed) return null; + + return ( + + ); +} diff --git a/frontend/src/components/questions/question-card.tsx b/frontend/src/components/questions/question-card.tsx index fffba35..7f5e7de 100644 --- a/frontend/src/components/questions/question-card.tsx +++ b/frontend/src/components/questions/question-card.tsx @@ -1,6 +1,7 @@ import Link from "next/link"; import { Badge } from "@/components/ui/badge"; import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils"; +import { CompletionIndicator } from "./completion-indicator"; import type { QuestionListItem } from "@/types"; interface QuestionCardProps { @@ -14,7 +15,10 @@ export function QuestionCard({ question }: QuestionCardProps) { className="block p-4 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:border-[var(--primary)] transition-colors" >
-

{question.title}

+
+ +

{question.title}

+
{ + if (typeof window === "undefined") return new Set(); + const stored = localStorage.getItem(PROGRESS_KEY); + return stored ? new Set(JSON.parse(stored)) : new Set(); +} + +export function markQuestionCompleted(slug: string, code?: string): void { + const completed = getCompletedQuestions(); + completed.add(slug); + localStorage.setItem(PROGRESS_KEY, JSON.stringify([...completed])); + + if (code) { + saveSolution(slug, code); + } +} + +export function isQuestionCompleted(slug: string): boolean { + return getCompletedQuestions().has(slug); +} + +export function saveSolution(slug: string, code: string): void { + if (typeof window === "undefined") return; + const solutions = getSavedSolutions(); + solutions[slug] = code; + localStorage.setItem(SOLUTIONS_KEY, JSON.stringify(solutions)); +} + +export function getSavedSolution(slug: string): string | null { + if (typeof window === "undefined") return null; + const solutions = getSavedSolutions(); + return solutions[slug] || null; +} + +function getSavedSolutions(): Record { + const stored = localStorage.getItem(SOLUTIONS_KEY); + return stored ? JSON.parse(stored) : {}; +}