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

Refactor Knights Puzzle layout

Browse source 
Remove title and add ribbon to the box. Add a subtle blue background.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 09:25:00 +00:00
parent 6eb57f0380
commit 85b730946a
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/KnightsPuzzle.tsx
View file

@ -249,11 +249,11 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
{/* Purple: Initial and Target positions side by side */} {/* Purple: Initial and Target positions side by side */}
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<Card className="bg-secondary/20 border-secondary"> <Card className="bg-blue-50/50 border-blue-200 relative overflow-hidden">
<CardHeader className="pb-3"> <div className="absolute top-0 right-0 bg-blue-500 text-white text-xs px-3 py-1 transform rotate-12 translate-x-2 -translate-y-1 shadow-sm">
<CardTitle className="text-lg">Initial Position</CardTitle> Initial
</CardHeader> </div>
<CardContent> <CardContent className="pt-6">
<div className="grid grid-cols-3 gap-1 w-24 h-24 border border-outline rounded mx-auto"> <div className="grid grid-cols-3 gap-1 w-24 h-24 border border-outline rounded mx-auto">
{initialBoard.map((row, rowIndex) => {initialBoard.map((row, rowIndex) =>
row.map((piece, colIndex) => ( row.map((piece, colIndex) => (