From 0485afd776f666305bcfa389f88b11e5945c4d5b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 5 Sep 2025 06:22:59 +0000
Subject: [PATCH] Refactor standalone page

---
 src/components/Layout.tsx   | 19 ++++++++++++++++++-
 src/pages/CrapsGamePage.tsx | 13 ++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index eabe147..f23cc80 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,15 +1,32 @@
 import Navigation from '@/components/Navigation';
 import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft } from 'lucide-react';
 
 interface LayoutProps {
   children: ReactNode;
+  showBackToGames?: boolean;
 }
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = ({ children, showBackToGames = false }: LayoutProps) => {
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <Navigation />
       
+      {showBackToGames && (
+        <div className="border-b border-outline bg-surface/50">
+          <div className="max-w-6xl mx-auto px-4 py-3">
+            <Button asChild variant="ghost" size="sm" className="gap-2">
+              <Link to="/themes/games">
+                <ArrowLeft className="w-4 h-4" />
+                Back to Games
+              </Link>
+            </Button>
+          </div>
+        </div>
+      )}
+      
       <main className="flex-1">
         {children}
       </main>
diff --git a/src/pages/CrapsGamePage.tsx b/src/pages/CrapsGamePage.tsx
index 157f624..691ddb4 100644
--- a/src/pages/CrapsGamePage.tsx
+++ b/src/pages/CrapsGamePage.tsx
@@ -1,9 +1,20 @@
+import { useEffect, useState } from "react";
 import Layout from "@/components/Layout";
 import CrapsGame from "@/components/CrapsGame";
 
 const CrapsGamePage = () => {
+  const [showBackLink, setShowBackLink] = useState(false);
+
+  useEffect(() => {
+    // Check if user came from games page
+    const referrer = document.referrer;
+    if (referrer.includes('/themes/games') && !referrer.includes('/themes/games/craps-game')) {
+      setShowBackLink(true);
+    }
+  }, []);
+
   return (
-    <Layout>
+    <Layout showBackToGames={showBackLink}>
       <CrapsGame showSocialShare={true} />
     </Layout>
   );