Add "Go back to Puzzles" option

Add a "Go back to Puzzles" option to the Knights Puzzle interactive when accessed from the puzzles page.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 09:21:44 +00:00
parent 14a244160a
commit 6eb57f0380
2 changed files with 19 additions and 2 deletions

View file

@ -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>