Refactor Knights Puzzle layout
Remove header, footer, and "Classic" tag. Center the title and add a share section. Ensure unique URI.
This commit is contained in:
parent
6f6d52880f
commit
14a244160a
2 changed files with 14 additions and 9 deletions
|
|
@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { RefreshCw, RotateCcw, ExternalLink } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import SocialShare from "@/components/SocialShare";
|
||||
|
||||
type Piece = 'white' | 'black' | null;
|
||||
type Position = { row: number; col: number };
|
||||
|
|
@ -172,12 +173,9 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
|
|||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6 space-y-6">
|
||||
{/* Green: Title and Description */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
|
||||
<Badge variant="outline">Classic</Badge>
|
||||
</div>
|
||||
{/* Green: Title and Description - Centered */}
|
||||
<div className="space-y-2 text-center">
|
||||
<h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
|
||||
<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.
|
||||
</p>
|
||||
|
|
@ -310,6 +308,14 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
|
|||
</a>
|
||||
</p>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import KnightsPuzzle from "@/components/KnightsPuzzle";
|
||||
|
||||
const KnightsPuzzlePage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-background">
|
||||
<KnightsPuzzle showSocialShare={true} />
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue