+ {/* Editor Toolbar */}
+
+
+ Python 3.10
+
-
+ {/* Monaco Editor */}
+
- {/* Output Console */}
+ {/* Interactive Console */}
{output && (
-
-
- Result
-
- {output.status === "Accepted" ? (
-
- ✓ Accepted{" "}
- {typeof output.runtime === "number" && (
-
- Runtime: {output.runtime}s
-
- )}
-
- ) : (
-
- ✗ {output.status}
- {output.errorMessage && (
-
- {output.errorMessage}
+
+
+ Console Output
+
+
+
+ {output.status === "Accepted" ? (
+
- )}
+
Runtime: {output.runtime}ms
+
+ ) : (
+
+
+ {output.errorMessage && (
+
+ {output.errorMessage}
+
+ )}
+
+ )}
+
)}
@@ -182,4 +218,4 @@ export default function ProblemSolvePage() {
);
-}
+}
\ No newline at end of file
diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
index 90fbd11..09bea8e 100644
--- a/src/app/problems/page.tsx
+++ b/src/app/problems/page.tsx
@@ -1,358 +1,131 @@
"use client";
-import { useState, useMemo, useEffect } from "react";
-import { useRouter } from "next/navigation"; // Use Next.js router
-import Sidebar from "../components/Sidebar";
+import { useEffect, useState } from "react";
+import Link from "next/link";
import Navbar from "../components/Navbar";
-import ProblemsTable from "../components/ProblemsTable";
-import SearchBar from "../components/SearchBar";
-import { Problem, FilterState } from "@/types";
+import Sidebar from "../components/Sidebar";
import { fetchProblems } from "@/lib/api";
-
-const SAMPLE_PROBLEMS: Problem[] = [
- {
- id: "1",
- title: "Linear Regression from Scratch",
- difficulty: "Easy",
- category: "Supervised Learning",
- acceptance: 78,
- status: "solved",
- tags: ["regression", "numpy"],
- },
- {
- id: "2",
- title: "Convolutional Neural Network",
- difficulty: "Medium",
- category: "Deep Learning",
- acceptance: 54,
- status: "solved",
- tags: ["cnn", "tensorflow", "images"],
- },
- {
- id: "3",
- title: "LSTM Time Series Prediction",
- difficulty: "Medium",
- category: "Deep Learning",
- acceptance: 48,
- status: "unsolved",
- tags: ["lstm", "time-series"],
- },
- {
- id: "4",
- title: "Transformer Architecture",
- difficulty: "Hard",
- category: "NLP",
- acceptance: 32,
- status: "unsolved",
- tags: ["transformer", "attention", "nlp"],
- },
- {
- id: "5",
- title: "K-Means Clustering",
- difficulty: "Easy",
- category: "Unsupervised Learning",
- acceptance: 72,
- status: "attempted",
- tags: ["clustering", "unsupervised"],
- },
- {
- id: "6",
- title: "Object Detection with YOLO",
- difficulty: "Medium",
- category: "Computer Vision",
- acceptance: 45,
- status: "unsolved",
- tags: ["object-detection", "yolo", "cv"],
- },
- {
- id: "7",
- title: "Sentiment Analysis",
- difficulty: "Easy",
- category: "NLP",
- acceptance: 65,
- status: "solved",
- tags: ["nlp", "classification"],
- },
- {
- id: "8",
- title: "GAN for Image Generation",
- difficulty: "Hard",
- category: "Deep Learning",
- acceptance: 28,
- status: "unsolved",
- tags: ["gan", "generative", "images"],
- },
- {
- id: "9",
- title: "Q-Learning CartPole",
- difficulty: "Medium",
- category: "Reinforcement Learning",
- acceptance: 51,
- status: "unsolved",
- tags: ["rl", "q-learning"],
- },
- {
- id: "10",
- title: "Neural Style Transfer",
- difficulty: "Hard",
- category: "Computer Vision",
- acceptance: 38,
- status: "unsolved",
- tags: ["style-transfer", "cnn", "art"],
- },
-];
+import { Problem } from "@/types";
+import { Search, Filter, CheckCircle, Circle } from "lucide-react";
export default function ProblemsPage() {
- const router = useRouter();
-
const [problems, setProblems] = useState
([]);
- const [isLoading, setIsLoading] = useState(true);
- const [filters, setFilters] = useState({
- level: "All Levels",
- category: "All Categories",
- statusFilter: "all",
- });
- const [selectedCategory, setSelectedCategory] = useState("");
- const [isSidebarOpen, setIsSidebarOpen] = useState(true);
- const [searchQuery, setSearchQuery] = useState("");
+ const [loading, setLoading] = useState(true);
+ const [search, setSearch] = useState("");
+ const [filterDifficulty, setFilterDifficulty] = useState("All");
useEffect(() => {
- const loadProblems = async () => {
+ const loadData = async () => {
try {
- setIsLoading(true);
- // Try to get problems from the backend API
const data = await fetchProblems();
-
- // If API doesn't return any data, use our hardcoded sample problems instead
- const problemsData =
- !data || data.length === 0 ? SAMPLE_PROBLEMS : data;
- setProblems(problemsData);
+ setProblems(data);
} catch (error) {
- console.error("Failed to fetch problems, using hardcoded data:", error);
- // If API call fails, just use the hardcoded sample data
- setProblems(SAMPLE_PROBLEMS);
+ console.error("Failed to load problems");
} finally {
- setIsLoading(false);
+ setLoading(false);
}
};
-
- loadProblems();
+ loadData();
}, []);
- const filteredProblems = useMemo(() => {
- let filtered = [...problems];
-
- if (filters.level !== "All Levels") {
- filtered = filtered.filter((p) => p.difficulty === filters.level);
- }
-
- if (filters.category !== "All Categories") {
- filtered = filtered.filter((p) => p.category === filters.category);
- }
-
- if (searchQuery) {
- const query = searchQuery.toLowerCase();
- filtered = filtered.filter(
- (p) =>
- p.title.toLowerCase().includes(query) ||
- p.tags.some((tag) => tag.toLowerCase().includes(query)) ||
- p.category.toLowerCase().includes(query)
- );
- }
-
- if (filters.statusFilter === "solved") {
- filtered = filtered.filter((p) => p.status === "solved");
- } else if (filters.statusFilter === "todo") {
- filtered = filtered.filter(
- (p) => p.status === "unsolved" || p.status === "attempted"
- );
- }
-
- return filtered;
- }, [filters, problems, searchQuery]);
-
- const handleCategoryChange = (category: string) => {
- setSelectedCategory(category);
- setFilters((prev) => ({ ...prev, category }));
- };
-
- const handleLogout = () => {
- console.log("Logging out...");
- };
+ const filteredProblems = problems.filter((p) => {
+ const matchesSearch = p.title.toLowerCase().includes(search.toLowerCase());
+ const matchesDiff = filterDifficulty === "All" || p.difficulty === filterDifficulty;
+ return matchesSearch && matchesDiff;
+ });
return (
-
setIsSidebarOpen(false)}
- />
-
- {!isSidebarOpen && (
-
- )}
-
-
-
-
-
-
-
- Practice Problems
-
-
- Master AI/ML concepts through hands-on challenges
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {filteredProblems.length} problems
+
{}} />
+
+
+
+
+ {/* Header & Filters */}
+
+
+
Problem Library
+
Master ML algorithms through practice
+
+
+
+
+
+ setSearch(e.target.value)}
+ />
+
-
-
-
-
-
-
-
-
+ {/* Problem List Table */}
+
+
+
Status
+
Title
+
Difficulty
+
Tags
+
- {isLoading ? (
-
-
-
-
Loading problems...
+ {loading ? (
+
Loading library...
+ ) : filteredProblems.length === 0 ? (
+
No problems found.
+ ) : (
+
+ {filteredProblems.map((problem) => (
+
+
+ {problem.status === "solved" ? (
+
+ ) : (
+
+ )}
+
+
+ {problem.title}
+
+
+
+ {problem.difficulty}
+
+
+
+ {problem.tags.slice(0, 2).map(tag => (
+
+ {tag}
+
+ ))}
+
+
+ ))}
-
- ) : (
-
{
- const problem = problems.find((p) => p.id === id);
- if (problem?.slug) {
- router.push(`/problems/${problem.slug}`);
- }
- }}
- />
- )}
+ )}
+