initial commit

FrontEnd/components/layout/Layout.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { RobotTarget } from '../../types';
+
+interface LayoutProps {
+    children: React.ReactNode;
+    currentTime: Date;
+    isHostConnected: boolean;
+    robotTarget: RobotTarget;
+    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null) => void;
+    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null;
+    isLoading: boolean;
+}
+
+export const Layout: React.FC<LayoutProps> = ({
+    children,
+    currentTime,
+    isHostConnected,
+    robotTarget,
+    onTabChange,
+    activeTab,
+    isLoading
+}) => {
+    return (
+        <div className="relative w-screen h-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
+            {/* Animated Nebula Background */}
+            <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
+            <div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
+            <div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>
+
+            {/* LOADING OVERLAY */}
+            {isLoading && (
+                <div className="absolute inset-0 z-[100] bg-black flex flex-col items-center justify-center gap-6">
+                    <div className="relative">
+                        <div className="w-24 h-24 border-4 border-neon-blue/30 rounded-full animate-spin"></div>
+                        <div className="absolute inset-0 border-t-4 border-neon-blue rounded-full animate-spin"></div>
+                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-neon-blue text-2xl font-tech font-bold">●</div>
+                    </div>
+                    <div className="text-center">
+                        <h2 className="text-2xl font-tech font-bold text-white tracking-widest mb-2">SYSTEM INITIALIZING</h2>
+                        <p className="font-mono text-neon-blue text-sm animate-pulse">ESTABLISHING CONNECTION...</p>
+                    </div>
+                </div>
+            )}
+
+            <Header
+                currentTime={currentTime}
+                onTabChange={onTabChange}
+                activeTab={activeTab}
+            />
+
+            {/* Main Content Area */}
+            <div className="absolute inset-0 pt-20 pb-10 z-10">
+                {children}
+            </div>
+
+            <Footer isHostConnected={isHostConnected} robotTarget={robotTarget} />
+        </div>
+    );
+};