53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
// Header.tsx
|
|
import React, { useState } 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 }) => {
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
|
|
const toggleMenu = () => {
|
|
setMenuOpen(!menuOpen)
|
|
}
|
|
|
|
const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
|
|
onViewChange(page)
|
|
toggleMenu()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<header>
|
|
<div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<nav className={`nav-links ${menuOpen ? "active":""}`}>
|
|
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
|
|
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
|
|
{showToggle && showHistoryModelsToggle && (
|
|
<button onClick={toggleDivs} className="nav-btn">
|
|
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
|
</button>
|
|
)}
|
|
</nav>
|
|
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
|
|
|
|
</button>
|
|
<div className="login-button">
|
|
<Login />
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|