Add Sunny Lines Puzzle - IMO 2025 P6 interactive with grid snapping and line extension

src/pages/theme-pages/ContestProblems.tsx

@@ -1,15 +1,119 @@
-import ComingSoon from "@/components/ComingSoon";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Search } from "lucide-react";
 import Layout from "@/components/Layout";
+import InteractiveCard from "@/components/InteractiveCard";
+import GridTilingPuzzle from "@/components/GridTilingPuzzle";
+import SunnyLinesPuzzle from "@/components/SunnyLinesPuzzle";
+
+interface Interactive {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  component: React.ComponentType;
+  greenScreenPath: string;
+}
+
+const interactives: Interactive[] = [
+  {
+    id: "grid-tiling-puzzle",
+    title: "Grid Tiling Puzzle",
+    description: "Based on IMO 2025: Place rectangular tiles on a grid so that each row and column has exactly one uncovered square.",
+    tags: ["puzzle", "geometry", "optimization", "imo", "contest-problems"],
+    component: GridTilingPuzzle,
+    greenScreenPath: "/contest-problems/grid-tiling"
+  },
+  {
+    id: "sunny-lines-puzzle",
+    title: "Sunny Lines Puzzle",
+    description: "Based on IMO 2025 P6: Place lines to cover points in a triangle. A line is 'sunny' if it's not parallel to x-axis, y-axis, or x+y=0.",
+    tags: ["puzzle", "geometry", "lines", "imo", "contest-problems"],
+    component: SunnyLinesPuzzle,
+    greenScreenPath: "/contest-problems/sunny-lines"
+  }
+];
 
 const ContestProblems = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedInteractive, setSelectedInteractive] = useState<Interactive | null>(null);
+
+  const filteredInteractives = interactives.filter(interactive => 
+    interactive.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
+    interactive.description.toLowerCase().includes(searchTerm.toLowerCase()) || 
+    interactive.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
+
+  if (selectedInteractive) {
+    const InteractiveComponent = selectedInteractive.component;
+    return (
+      <div className="min-h-screen bg-background p-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          <div className="flex items-center justify-between">
+            <button 
+              onClick={() => setSelectedInteractive(null)} 
+              className="text-primary hover:text-primary/80 font-medium"
+            >
+              ← Back to Contest Problems
+            </button>
+            
+            <Link to="/themes" className="text-primary hover:text-primary/80 font-medium">
+              Back to Themes →
+            </Link>
+          </div>
+          <InteractiveComponent />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <Layout>
-      <div className="py-12 px-4">
-        <div className="max-w-6xl mx-auto">
-          <ComingSoon 
-            title="Contest Problems"
-            description="Practice with problems from programming competitions, mathematical olympiads, and algorithmic challenges with interactive solutions and explanations."
-          />
+      <div className="container mx-auto px-4 py-8">
+        <div className="space-y-8">
+          <div className="flex items-center gap-4">
+            <Link to="/themes" className="text-primary hover:text-primary/80 font-medium">
+              ← Back to Themes
+            </Link>
+            <h1 className="text-3xl font-bold text-foreground">Contest Problems</h1>
+          </div>
+
+          <div className="space-y-4">
+            <p className="text-muted-foreground text-lg">
+              Practice with problems from programming competitions, mathematical olympiads, and algorithmic challenges with interactive solutions and explanations.
+            </p>
+          </div>
+
+          <div className="relative max-w-md">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+            <input 
+              type="text" 
+              placeholder="Search interactives..." 
+              value={searchTerm} 
+              onChange={e => setSearchTerm(e.target.value)} 
+              className="w-full pl-10 pr-4 py-2 border border-outline rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" 
+            />
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredInteractives.map(interactive => (
+              <InteractiveCard 
+                key={interactive.id} 
+                title={interactive.title} 
+                description={interactive.description} 
+                tags={interactive.tags} 
+                onClick={() => setSelectedInteractive(interactive)} 
+              />
+            ))}
+          </div>
+
+          {filteredInteractives.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">
+                No interactives found matching "{searchTerm}"
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </Layout>