57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
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;
|