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

Align status to the right

Browse source 
Right-align the status element in the Knights Puzzle.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 09:17:22 +00:00
parent c1c5e5ca60
commit 6f6d52880f
1 changed files with 8 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/KnightsPuzzle.tsx
View file

@ -183,17 +183,15 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
</p> </p>
</div> </div>
{/* Blue: Number of moves */} {/* Blue and Orange: Moves (left) and Status (right) on same line */}
<div className="text-lg"> <div className="flex justify-between items-center text-lg">
<span className="font-semibold">Moves: </span> <div>
<span className="font-mono text-primary">{moveCount}</span> <span className="font-semibold">Moves: </span>
</div> <span className="font-mono text-primary">{moveCount}</span>
</div>
{/* Orange: Status (without heading) */} <div className="font-semibold">
<div className="text-lg">
<span className="font-semibold">
{isComplete ? "🎉 Puzzle Solved!" : "🎯 In Progress"} {isComplete ? "🎉 Puzzle Solved!" : "🎯 In Progress"}
</span> </div>
</div> </div>
{/* Yellow: Main interactive with controls */} {/* Yellow: Main interactive with controls */}