main

components/Layout.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { LegalModal } from './LegalModal';
+import { useAuth } from '../AuthContext';
+import { ApiKeyModal } from './ApiKeyModal';
+
+interface LayoutProps {
+    children: React.ReactNode;
+    projectTitle?: string;
+}
+
+export const Layout: React.FC<LayoutProps> = ({ children, projectTitle }) => {
+    const { user, logout } = useAuth();
+    const [legalModalOpen, setLegalModalOpen] = useState(false);
+    const [legalContent, setLegalContent] = useState({ title: '', text: '' });
+    const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState(false);
+
+    const openLegalModal = (title: string, text: string) => {
+        setLegalContent({ title, text });
+        setLegalModalOpen(true);
+    };
+
+    if (!user) return <>{children}</>;
+
+    return (
+        <div className="min-h-screen flex flex-col bg-stone-50">
+            <Header
+                user={user}
+                logout={logout}
+                openApiKeyModal={() => setIsApiKeyModalOpen(true)}
+                projectTitle={projectTitle}
+            />
+
+            <main className="flex-grow">
+                {children}
+            </main>
+
+            <Footer openModal={openLegalModal} />
+
+            <LegalModal
+                isOpen={legalModalOpen}
+                onClose={() => setLegalModalOpen(false)}
+                title={legalContent.title}
+                content={legalContent.text}
+            />
+
+            <ApiKeyModal
+                isOpen={isApiKeyModalOpen}
+                onClose={() => setIsApiKeyModalOpen(false)}
+            />
+        </div>
+    );
+};
+
+export default Layout;