Started changes the file structure

app/components/Header.tsx

@@ -0,0 +1,43 @@
+// Header.tsx
+import React from 'react';
+import Login from './Login';
+
+interface HeaderProps {
+  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
+  showDivs: boolean;
+  toggleDivs: () => void;
+  showHistoryModelsToggle: boolean;
+  showToggle: boolean; // Add this prop
+}
+
+const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
+  return (
+    <>
+      <header>
+        <ul>
+          <li>
+            <button onClick={() => onViewChange('AI')} className="header-button header-logo">
+              <img src="/img/logo.png" alt="logo" className="header-logo" />
+            </button>
+          </li>
+          <li>
+            <button onClick={() => onViewChange('FAQ')} className="header-button">FAQ</button>
+          </li>
+          <li>
+            <button onClick={() => onViewChange('Documentation')} className="header-button">Documentation</button>
+          </li>
+          {showToggle && showHistoryModelsToggle && (
+            <li>
+              <button onClick={toggleDivs} className="header-button">
+                {showDivs ? 'Hide History/Models' : 'Show History/Models'}
+              </button>
+            </li>
+          )}
+        </ul>
+      <Login />
+      </header>
+    </>
+  );
+};
+
+export default Header;