Toggle group on problems

This commit is contained in:
2026-02-06 17:46:44 +01:00
parent cea3d4a473
commit 00deda5df1
+13 -18
View File
@@ -16,7 +16,6 @@ export default function Problems() {
const [viewMode, setViewMode] = useState<"grid" | "list">("grid"); const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
const difficulties = ["All", "Easy", "Medium", "Hard"]; const difficulties = ["All", "Easy", "Medium", "Hard"];
return ( return (
@@ -40,28 +39,24 @@ export default function Problems() {
{/* Category Filter */} {/* Category Filter */}
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{categories.map((cat, i) => ( <ToggleGroup variant="outline" type="multiple">
<Badge {["Arrays", "Trees", "Graphs", "DP", "Strings"].map((f) => (
key={cat} <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
variant={i === 0 ? "default" : "secondary"} {f}
className="cursor-pointer" </ToggleGroupItem>
>
{cat}
</Badge>
))} ))}
</ToggleGroup>
</div> </div>
{/* Difficulty Filter */} {/* Difficulty Filter */}
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
{difficulties.map((diff, i) => ( <ToggleGroup variant="outline" type="multiple">
<Button {["Easy", "Medium", "Hard"].map((f) => (
key={diff} <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
variant={i === 0 ? "outline" : "ghost"} {f}
size="sm" </ToggleGroupItem>
>
{diff}
</Button>
))} ))}
</ToggleGroup>
</div> </div>
{/* View Toggle */} {/* View Toggle */}