feat: add leetcode problem search and filters

Author: SunilKumarKV

src/problems/leetcode/LeetCodeProblems.jsx

@@ -1,34 +1,30 @@
 import React, { useEffect, useState } from "react";
 import { recentSolved } from "./recentSolved";
 
-const LEETCODE_USERNAME = "Sunil-Kumar-K-V";
+const LEETCODE_USERNAME = "YOUR_LEETCODE_USERNAME";
 
 export default function LeetCodeProblems() {
   const [stats, setStats] = useState(null);
+  const [query, setQuery] = useState("");
+  const [difficulty, setDifficulty] = useState("All");
 
   useEffect(() => {
     fetch(`https://leetcode-stats-api.herokuapp.com/${LEETCODE_USERNAME}`)
       .then((res) => res.json())
       .then(setStats)
       .catch(console.error);
   }, []);
-  
-  <section className="section-panel">
-  <span className="section-eyebrow">Recent Practice</span>
-  <h2>Recently Solved Problems</h2>
 
-  <div className="feature-grid">
-    {recentSolved.map((problem) => (
-      <article className="glass-card" key={problem.title}>
-        <h3>{problem.title}</h3>
-        <p>{problem.platform} • {problem.difficulty}</p>
-        <a href={problem.url} target="_blank" rel="noreferrer">
-          View Problem →
-        </a>
-      </article>
-    ))}
-  </div>
-</section>
+  const filteredProblems = recentSolved.filter((problem) => {
+    const matchesSearch = problem.title
+      .toLowerCase()
+      .includes(query.toLowerCase());
+
+    const matchesDifficulty =
+      difficulty === "All" || problem.difficulty === difficulty;
+
+    return matchesSearch && matchesDifficulty;
+  });
 
   return (
     <main className="page-shell">
@@ -66,6 +62,58 @@ export default function LeetCodeProblems() {
           <p>Advanced problem-solving challenges.</p>
         </article>
       </div>
+
+      <section className="section-panel">
+        <span className="section-eyebrow">Recent Practice</span>
+        <h2>Recently Solved Problems</h2>
+
+        <div className="problem-grid">
+          <input
+            type="text"
+            placeholder="Search problems..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            style={{
+              padding: "14px",
+              borderRadius: "12px",
+              border: "1px solid rgba(255,255,255,0.2)",
+              background: "transparent",
+              color: "inherit",
+            }}
+          />
+
+          <select
+            value={difficulty}
+            onChange={(e) => setDifficulty(e.target.value)}
+            style={{
+              padding: "14px",
+              borderRadius: "12px",
+              border: "1px solid rgba(255,255,255,0.2)",
+              background: "transparent",
+              color: "inherit",
+            }}
+          >
+            <option>All</option>
+            <option>Easy</option>
+            <option>Medium</option>
+            <option>Hard</option>
+          </select>
+        </div>
+
+        <div className="feature-grid">
+          {filteredProblems.map((problem) => (
+            <article className="glass-card" key={problem.title}>
+              <h3>{problem.title}</h3>
+              <p>
+                {problem.platform} • {problem.difficulty}
+              </p>
+              <a href={problem.url} target="_blank" rel="noreferrer">
+                View Problem →
+              </a>
+            </article>
+          ))}
+        </div>
+      </section>
     </main>
   );
 }

src/problems/leetcode/recentSolved.js

@@ -5,4 +5,16 @@ export const recentSolved = [
     platform: "LeetCode",
     url: "https://leetcode.com/problems/two-sum/",
   },
+  {
+    title: "Valid Parentheses",
+    difficulty: "Easy",
+    platform: "LeetCode",
+    url: "https://leetcode.com/problems/valid-parentheses/",
+  },
+  {
+    title: "Add Two Numbers",
+    difficulty: "Medium",
+    platform: "LeetCode",
+    url: "https://leetcode.com/problems/add-two-numbers/",
+  },
 ];