Initial commit from ux_aura_central

containers/MainContainer.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { User } from '../types';
+import MainLayout from './layout/MainLayout';
+
+interface MainContainerProps {
+    user: User | null;
+    workspaceUrl: string;
+    signOutUrl: string;
+    children?: React.ReactNode;
+}
+
+/**
+ * MainContainer handles layout logic:
+ * - Theme state access
+ * - App version fetching
+ */
+const MainContainer: React.FC<MainContainerProps> = (props) => {
+    const { theme, toggleTheme } = useTheme();
+    const [version, setVersion] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetch('./version.json')
+            .then(response => {
+                if (response.ok) return response.json();
+                return null;
+            })
+            .then(data => {
+                if (data && data.version) setVersion(data.version);
+            })
+            .catch(() => {});
+    }, []);
+    
+    return (
+        <MainLayout 
+            {...props} 
+            theme={theme} 
+            toggleTheme={toggleTheme} 
+            version={version} 
+        />
+    );
+};
+
+export default MainContainer;

containers/layout/MainLayout.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { User } from '../../types';
+import Header from './components/Header';
+import Footer from './components/Footer';
+
+interface MainLayoutProps {
+    user: User | null;
+    workspaceUrl: string;
+    signOutUrl: string;
+    theme: 'light' | 'dark';
+    toggleTheme: () => void;
+    version: string | null;
+    children?: React.ReactNode;
+}
+
+const MainLayout: React.FC<MainLayoutProps> = ({ 
+    user, 
+    workspaceUrl, 
+    signOutUrl, 
+    theme, 
+    toggleTheme, 
+    version, 
+    children 
+}) => {
+    return (
+        <div className="relative h-screen w-full flex flex-col bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 overflow-hidden text-sm sm:text-base">
+            <Header 
+                user={user} 
+                workspaceUrl={workspaceUrl} 
+                signOutUrl={signOutUrl} 
+                theme={theme} 
+                toggleTheme={toggleTheme} 
+            />
+
+            <main className="relative z-10 flex-1 flex flex-col overflow-hidden">
+                {children || (
+                    <div className="flex-1 flex flex-col items-center justify-center p-8 text-center">
+                        <h2 className="text-2xl font-bold mb-4">Framework Ready</h2>
+                        <p className="text-slate-500 max-w-md">The skeleton is successfully initialized.</p>
+                    </div>
+                )}
+            </main>
+            
+            <Footer version={version} />
+        </div>
+    );
+};
+
+export default MainLayout;

containers/layout/components/Footer.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface FooterProps {
+    version: string | null;
+}
+
+const Footer: React.FC<FooterProps> = ({ version }) => {
+    return (
+        <footer className="flex-shrink-0 relative z-10 w-full p-3 text-center text-slate-600 dark:text-slate-400 text-xs border-t border-slate-200 dark:border-slate-800">
+            <p>© 2025 HumanizeIQ. All Rights Reserved. {version && `v${version}`}</p>
+        </footer>
+    );
+};
+
+export default Footer;

containers/layout/components/Header.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { User } from '../../../types';
+import { SunIcon, MoonIcon } from '../../../components/icons';
+
+interface HeaderProps {
+    user: User | null;
+    workspaceUrl: string;
+    signOutUrl: string;
+    theme: 'light' | 'dark';
+    toggleTheme: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({ user, workspaceUrl, signOutUrl, theme, toggleTheme }) => {
+    return (
+        <header className="flex-shrink-0 relative z-20 w-full p-4 px-6 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 backdrop-blur-sm">
+            <div className="flex items-center gap-4">
+                <img 
+                    src="https://www.humanizeiq.ai/home/images/HumanizeIQ_Logo_updated.png" 
+                    alt="HumanizeIQ Logo" 
+                    className="h-8 sm:h-10 w-auto" 
+                />
+                <h1 className="text-lg sm:text-xl font-bold text-slate-800 dark:text-slate-200 hidden xs:block">Aura Craft Studio</h1>
+            </div>
+            
+            <nav className="flex items-center gap-3 sm:gap-6 text-xs sm:text-sm font-medium text-slate-700 dark:text-slate-300">
+                {user && (
+                    <>
+                        <a href={workspaceUrl} className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 hidden md:block">My Workspace</a>
+                        <span className="bg-slate-900/5 dark:bg-white/10 backdrop-blur-sm px-3 py-1.5 rounded-md text-slate-900 dark:text-slate-100 max-w-[120px] truncate">
+                            {user.name}
+                        </span>
+                        <a href={signOutUrl} className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Sign out</a>
+                    </>
+                )}
+                <button 
+                    onClick={toggleTheme} 
+                    className="p-2 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors" 
+                    aria-label="Toggle theme"
+                >
+                    {theme === 'light' ? <MoonIcon /> : <SunIcon />}
+                </button>
+            </nav>
+        </header>
+    );
+};
+
+export default Header;