File size: 2,924 Bytes
dfb4ae5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import React from 'react';
import { Book, Search, Home, Library as LibraryIcon, FolderOpen, Languages } from 'lucide-react';
export const Layout = ({ children, currentView, setView, activeProject, lang, onLangChange, t }) => {
return (
<div dir={lang === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-slate-50 flex flex-col font-sans">
{/* Header */}
<header className="bg-emerald-900 text-white shadow-lg sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
<div className="flex items-center gap-3 cursor-pointer" onClick={() => setView('home')}>
<div className="bg-emerald-700 p-2 rounded-lg">
<Book className="w-6 h-6 text-emerald-100" />
</div>
<h1 className="text-xl font-bold tracking-tight">{t.title}</h1>
</div>
<nav className="hidden md:flex items-center gap-1">
<button onClick={() => setView('home')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'home' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
<Home className="w-4 h-4" /> {t.navHome}
</button>
<button onClick={() => setView('smart-researcher')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'smart-researcher' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
<Search className="w-4 h-4" /> {t.navSmartResearcher}
</button>
<button onClick={() => setView('library')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'library' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
<LibraryIcon className="w-4 h-4" /> {t.navLibrary}
</button>
<button onClick={() => setView('research')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'research' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
<FolderOpen className="w-4 h-4" /> {t.navProjects}
</button>
</nav>
<div className="flex items-center gap-3">
<button
onClick={() => onLangChange(lang === 'ar' ? 'fr' : 'ar')}
className="flex items-center gap-2 bg-emerald-800 px-3 py-1.5 rounded-lg text-sm hover:bg-emerald-700 transition"
>
<Languages className="w-4 h-4" />
{lang === 'ar' ? 'Français' : 'العربية'}
</button>
</div>
</div>
</header>
{/* Main Content */}
<main className="flex-grow max-w-7xl mx-auto px-4 py-8 w-full">
{children}
</main>
{/* Footer */}
<footer className="bg-white border-t py-6 text-center text-slate-500 text-sm">
<p>© {new Date().getFullYear()} {t.title} - {t.footerText}</p>
</footer>
</div>
);
}; |