From 6eb57f03804925dfd3af2e1da104f72fb1336da6 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:21:44 +0000
Subject: [PATCH] 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  | 19 ++++++++++++++++++-
 src/pages/theme-pages/Puzzles.tsx |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/KnightsPuzzle.tsx b/src/components/KnightsPuzzle.tsx
index 76e1050..f1f5d72 100644
--- a/src/components/KnightsPuzzle.tsx
+++ b/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>
diff --git a/src/pages/theme-pages/Puzzles.tsx b/src/pages/theme-pages/Puzzles.tsx
index 51f39f2..b24a5f9 100644
--- a/src/pages/theme-pages/Puzzles.tsx
+++ b/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>