Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor Knights Puzzle layout

Browse source 
Remove header, footer, and "Classic" tag. Center the title and add a share section. Ensure unique URI.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 09:18:40 +00:00
parent 6f6d52880f
commit 14a244160a
2 changed files with 14 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/KnightsPuzzle.tsx
View file

@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { RefreshCw, RotateCcw, ExternalLink } from "lucide-react"; import { RefreshCw, RotateCcw, ExternalLink } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import SocialShare from "@/components/SocialShare";
type Piece = 'white' | 'black' | null; type Piece = 'white' | 'black' | null;
type Position = { row: number; col: number }; type Position = { row: number; col: number };
@ -172,12 +173,9 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
return ( return (
<div className="max-w-4xl mx-auto p-6 space-y-6"> <div className="max-w-4xl mx-auto p-6 space-y-6">
{/* Green: Title and Description */} {/* Green: Title and Description - Centered */}
<div className="space-y-2"> <div className="space-y-2 text-center">
<div className="flex items-center gap-2">
<h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1> <h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
<Badge variant="outline">Classic</Badge>
</div>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Can the black and white knights swap places using legal chess moves? Move knights by clicking on them, then clicking on a valid destination. Can the black and white knights swap places using legal chess moves? Move knights by clicking on them, then clicking on a valid destination.
</p> </p>
@ -310,6 +308,14 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
</a> </a>
</p> </p>
</div> </div>
{/* Social Share Section */}
{showSocialShare && (
<SocialShare
title="Knights Exchange Puzzle"
description="Can the black and white knights swap places using legal chess moves? Try this classic puzzle!"
/>
)}
</div> </div>
); );
}; };

5
src/pages/KnightsPuzzlePage.tsx
View file

@ -1,11 +1,10 @@
import Layout from "@/components/Layout";
import KnightsPuzzle from "@/components/KnightsPuzzle"; import KnightsPuzzle from "@/components/KnightsPuzzle";
const KnightsPuzzlePage = () => { const KnightsPuzzlePage = () => {
return ( return (
<Layout> <div className="min-h-screen bg-background">
<KnightsPuzzle showSocialShare={true} /> <KnightsPuzzle showSocialShare={true} />
</Layout> </div>
); );
}; };