From 00deda5df1a49a6eadff14c8fee16e412d4d6616 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Fri, 6 Feb 2026 17:46:44 +0100
Subject: [PATCH] Toggle group on problems

---
 src/app/problems/page.tsx | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
index 1992627..02cb1ce 100644
--- a/src/app/problems/page.tsx
+++ b/src/app/problems/page.tsx
@@ -16,7 +16,6 @@ export default function Problems() {
 
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
 
-  const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
   const difficulties = ["All", "Easy", "Medium", "Hard"];
 
   return (
@@ -40,28 +39,24 @@ export default function Problems() {
 
           {/* Category Filter */}
           <div className="flex flex-wrap gap-2">
-            {categories.map((cat, i) => (
-              <Badge
-                key={cat}
-                variant={i === 0 ? "default" : "secondary"}
-                className="cursor-pointer"
-              >
-                {cat}
-              </Badge>
-            ))}
+            <ToggleGroup variant="outline" type="multiple">
+              {["Arrays", "Trees", "Graphs", "DP", "Strings"].map((f) => (
+                <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
+                  {f}
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
           </div>
 
           {/* Difficulty Filter */}
-          <div className="flex gap-2">
-            {difficulties.map((diff, i) => (
-              <Button
-                key={diff}
-                variant={i === 0 ? "outline" : "ghost"}
-                size="sm"
-              >
-                {diff}
-              </Button>
-            ))}
+          <div className="flex flex-wrap gap-2">
+            <ToggleGroup variant="outline" type="multiple">
+              {["Easy", "Medium", "Hard"].map((f) => (
+                <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
+                  {f}
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
           </div>
 
           {/* View Toggle */}