File size: 1,836 Bytes
6993919 | 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 56 57 58 59 60 61 62 63 | /**
* Main Layout Component
*/
import { useEffect } from 'react';
import { useAppStore } from '../store/appStore';
import { useHealthCheck } from '../hooks/useBackend';
import Sidebar from './Sidebar';
import Header from './Header';
import LiveStatusBar from './LiveStatusBar';
import StatusBar from './StatusBar';
interface LayoutProps {
children: React.ReactNode;
}
export default function Layout({ children }: LayoutProps) {
const sidebarOpen = useAppStore((state) => state.sidebarOpen);
const setBackendStatus = useAppStore((state) => state.setBackendStatus);
const error = useAppStore((state) => state.error);
const clearError = useAppStore((state) => state.clearError);
const { data: health, isError } = useHealthCheck();
useEffect(() => {
if (health) {
setBackendStatus('connected');
} else if (isError) {
setBackendStatus('disconnected');
}
}, [health, isError, setBackendStatus]);
return (
<div className="min-h-screen bg-[#0a0a0f] text-gray-100 flex">
{/* Sidebar */}
<Sidebar />
{/* Main Content */}
<div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarOpen ? 'ml-64' : 'ml-16'}`}>
<LiveStatusBar />
<Header />
{/* Error Banner */}
{error && (
<div className="bg-red-500/20 border border-red-500/50 text-red-200 px-4 py-3 mx-4 mt-4 rounded-lg flex items-center justify-between">
<span>{error}</span>
<button onClick={clearError} className="text-red-300 hover:text-red-100">
✕
</button>
</div>
)}
{/* Page Content */}
<main className="flex-1 p-6 overflow-auto">
{children}
</main>
{/* Status Bar */}
<StatusBar health={health} />
</div>
</div>
);
}
|