Shadcnified problems

src/app/leaderboards/page.tsx

@@ -170,7 +170,7 @@ const weeklyLeaderboard = [
   },
 ];
 
-const Leaderboards = () => {
+export default function Leaderboards() {
   const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
 
   const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
@@ -268,9 +268,7 @@ const Leaderboards = () => {
       </div>
     </div>
   );
-};
+}
-
-export default Leaderboards;
 
 /* ---------- helpers ---------- */
 

src/app/problems/page.tsx

@@ -1,13 +1,102 @@
 "use client";
 
 import { Search, Grid, List } from "lucide-react";
-import ProblemCard from "@/components/app/ProblemCard";
 import { useState } from "react";
 
+import ProblemCard from "@/components/app/ProblemCard";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
 const Problems = () => {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
 
-  const problems = [
+  const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
+  const difficulties = ["All", "Easy", "Medium", "Hard"];
+
+  return (
+    <div className="min-h-screen pt-24 pb-16">
+      <div className="container mx-auto px-6 space-y-8">
+        {/* Header */}
+        <div>
+          <h1 className="text-4xl font-bold">Problems</h1>
+          <p className="text-muted-foreground">
+            Choose your battleground. Each run brings you closer to your PB.
+          </p>
+        </div>
+
+        {/* Filters */}
+        <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
+          {/* Search */}
+          <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input placeholder="Search problems..." className="pl-9" />
+          </div>
+
+          {/* 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>
+            ))}
+          </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>
+
+          {/* View Toggle */}
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={(v) => v && setViewMode(v as "grid" | "list")}
+          >
+            <ToggleGroupItem value="grid" aria-label="Grid view">
+              <Grid className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="list" aria-label="List view">
+              <List className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+
+        {/* Problem Grid */}
+        <div
+          className={`grid gap-4 ${
+            viewMode === "grid"
+              ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+              : "grid-cols-1"
+          }`}
+        >
+          {problems.map((problem, i) => (
+            <ProblemCard key={problem.name} {...problem} index={i} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Problems;
+
+/* ---------------- data ---------------- */
+
+const problems = [
   {
     name: "Two Sum Dash",
     difficulty: "easy" as const,
@@ -92,106 +181,4 @@ const Problems = () => {
     bestTime: "5:01",
     attempts: 987,
   },
-  ];
+];
-
-  const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
-  const difficulties = ["All", "Easy", "Medium", "Hard"];
-
-  return (
-    <div className="min-h-screen pt-24 pb-16">
-      <div className="container mx-auto px-6">
-        {/* Header */}
-        <div className="mb-10">
-          <h1 className="text-4xl font-bold text-foreground mb-2">Problems</h1>
-          <p className="text-muted-foreground">
-            Choose your battleground. Each run brings you closer to your PB.
-          </p>
-        </div>
-
-        {/* Filters */}
-        <div className="flex flex-col lg:flex-row gap-4 mb-8">
-          {/* Search */}
-          <div className="relative flex-1 max-w-md">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-            <input
-              type="text"
-              placeholder="Search problems..."
-              className="w-full pl-10 pr-4 py-2.5 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
-            />
-          </div>
-
-          {/* Category Filter */}
-          <div className="flex gap-2 flex-wrap">
-            {categories.map((cat) => (
-              <button
-                key={cat}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
-                  cat === "All"
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-secondary text-muted-foreground hover:text-foreground hover:bg-secondary/80"
-                }`}
-              >
-                {cat}
-              </button>
-            ))}
-          </div>
-
-          {/* Difficulty Filter */}
-          <div className="flex gap-2">
-            {difficulties.map((diff) => (
-              <button
-                key={diff}
-                className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                  diff === "All"
-                    ? "bg-primary/10 text-primary border border-primary/30"
-                    : "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
-                }`}
-              >
-                {diff}
-              </button>
-            ))}
-          </div>
-
-          {/* View Toggle */}
-          <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
-            <button
-              onClick={() => setViewMode("grid")}
-              className={`p-2 rounded-md transition-all ${
-                viewMode === "grid"
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              <Grid className="h-4 w-4" />
-            </button>
-            <button
-              onClick={() => setViewMode("list")}
-              className={`p-2 rounded-md transition-all ${
-                viewMode === "list"
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              <List className="h-4 w-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Problem Grid */}
-        <div
-          className={`grid gap-4 ${
-            viewMode === "grid"
-              ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
-              : "grid-cols-1"
-          }`}
-        >
-          {problems.map((problem, i) => (
-            <ProblemCard key={problem.name} {...problem} index={i} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Problems;

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/toggle-group.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }