Toggle group on problems
This commit is contained in:
+15
-20
@@ -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}
|
</ToggleGroup>
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</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}
|
</ToggleGroup>
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* View Toggle */}
|
{/* View Toggle */}
|
||||||
|
|||||||
Reference in New Issue
Block a user