Layout.tsx

// /home/ubuntu/visionos-frontend/src/components/Layout.tsx
import React from 'react';
import Link from 'next/link'; // Import Link for navigation

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Header/Navigation */}
      <header className="bg-gray-800 text-white p-4">
        <nav className="container mx-auto flex justify-between items-center">
          <h1 className="text-xl font-bold">
            <Link href="/">VisionOS UI</Link>
          </h1>
          <ul className="flex space-x-4">
            <li><Link href="/" className="hover:text-gray-300">Chat</Link></li>
            <li><Link href="/workflow" className="hover:text-gray-300">Workflow</Link></li>
            <li><Link href="/settings" className="hover:text-gray-300">Settings</Link></li>
            {/* Add more navigation links here */}
          </ul>
        </nav>
      </header>

      {/* Main Content Area */}
      <main className="flex-grow p-4 container mx-auto">
        {children}
      </main>

      {/* Footer */}
      <footer className="bg-gray-200 p-4 text-center text-sm text-gray-600">
        © 2025 VisionOS
      </footer>
    </div>
  );
};

export default Layout;