Fix interactive page layout

Remove global header/footer and add share section to the interactive page.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-20 02:37:37 +00:00
parent 55b50ddfdd
commit 8d84ac0476
2 changed files with 20 additions and 10 deletions

View file

@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { RotateCcw, Undo2 } from 'lucide-react';
import SocialShare from '@/components/SocialShare';
interface Edge {
from: number;
@ -265,6 +266,15 @@ const GameOfSim = () => {
Avoid creating a triangle of your own color!
</p>
</div>
{/* Social Share */}
<div className="flex justify-center">
<SocialShare
title="Game of Sim"
description="Play the strategic Game of Sim! Take turns coloring edges between vertices while avoiding creating triangles of your own color."
url={`${window.location.origin}/themes/games`}
/>
</div>
</CardContent>
</Card>
</div>

View file

@ -36,16 +36,16 @@ const GamesGallery = () => {
if (selectedGame) {
const GameComponent = selectedGame.component;
return (
<div className="space-y-6">
<div className="flex items-center gap-4">
<button
onClick={() => setSelectedGame(null)}
className="text-primary hover:text-primary/80 font-medium"
>
Back to Educational Games
</button>
</div>
<div className="bg-background border rounded-lg p-6">
<div className="min-h-screen bg-background">
<div className="container mx-auto px-4 py-8 space-y-6">
<div className="flex items-center gap-4">
<button
onClick={() => setSelectedGame(null)}
className="text-primary hover:text-primary/80 font-medium"
>
Back to Educational Games
</button>
</div>
<GameComponent />
</div>
</div>