Add "Go back to Puzzles" option

Add a "Go back to Puzzles" option to the Knights Puzzle interactive when accessed from the puzzles page.

src/components/KnightsPuzzle.tsx

@@ -2,9 +2,10 @@ import { useState, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { RefreshCw, RotateCcw, ExternalLink } from "lucide-react";
+import { RefreshCw, RotateCcw, ExternalLink, ArrowLeft } from "lucide-react";
 import { toast } from "sonner";
 import SocialShare from "@/components/SocialShare";
+import { useSearchParams, useNavigate } from "react-router-dom";
 
 type Piece = 'white' | 'black' | null;
 type Position = { row: number; col: number };
@@ -14,6 +15,9 @@ interface KnightsPuzzleProps {
 }
 
 const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const isFromPuzzles = searchParams.get('from') === 'puzzles';
   // Initial state: white knights at top corners, black knights at bottom corners
   const initialBoard: Piece[][] = [
     ['white', null, 'white'],
@@ -173,6 +177,19 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
 
   return (
     <div className="max-w-4xl mx-auto p-6 space-y-6">
+      {/* Back to Puzzles button - only show when coming from puzzles */}
+      {isFromPuzzles && (
+        <div className="flex items-center gap-4">
+          <button 
+            onClick={() => navigate('/themes/puzzles')}
+            className="text-primary hover:text-primary/80 font-medium flex items-center gap-2"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Go back to Puzzles
+          </button>
+        </div>
+      )}
+
       {/* Green: Title and Description - Centered */}
       <div className="space-y-2 text-center">
         <h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>

src/pages/theme-pages/Puzzles.tsx

@@ -39,7 +39,7 @@ const Puzzles = () => {
                 difficulty={puzzle.difficulty}
                 duration={puzzle.duration}
                 participants={puzzle.participants}
-                onClick={() => navigate(puzzle.path)}
+                onClick={() => navigate(`${puzzle.path}?from=puzzles`)}
               />
             ))}
           </div>