122 lines
4.2 KiB
JavaScript
122 lines
4.2 KiB
JavaScript
import { useState } from 'react'
|
|
import { Outlet, Link } from 'react-router-dom'
|
|
import './App.css'
|
|
|
|
function App() {
|
|
const [toast, setToast] = useState({ visible: false, message: '', type: 'success' });
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
// Show toast notification
|
|
const showToast = (message, type = 'success') => {
|
|
setToast({ visible: true, message, type });
|
|
setTimeout(() => {
|
|
setToast({ visible: false, message: '', type: 'success' });
|
|
}, 3000);
|
|
};
|
|
|
|
// Toggle mobile menu
|
|
const toggleMobileMenu = () => {
|
|
setMobileMenuOpen(!mobileMenuOpen);
|
|
};
|
|
|
|
return (
|
|
<div className="app-container">
|
|
{/* Navigation Menu */}
|
|
<nav className="main-nav" style={{ backgroundColor: 'var(--darker-bg)', borderBottom: '1px solid var(--medium-bg)', zIndex: 10 }}>
|
|
<div className="container">
|
|
<div className="nav-content">
|
|
<div className="logo-container">
|
|
{/* Logo with glow effect */}
|
|
<Link to="/" className="logo-link">
|
|
<div className="logo-image-container">
|
|
<img src="/app/logo_2.png" alt="Logo" className="logo-image" />
|
|
</div>
|
|
{/* <span className="logo-text">LocalAGI</span> */}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="desktop-menu">
|
|
<ul className="nav-links">
|
|
<li>
|
|
<Link to="/" className="nav-link">
|
|
<i className="fas fa-home mr-2"></i> Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/agents" className="nav-link">
|
|
<i className="fas fa-users mr-2"></i> Agent List
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/actions-playground" className="nav-link">
|
|
<i className="fas fa-bolt mr-2"></i> Actions Playground
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/group-create" className="nav-link">
|
|
<i className="fas fa-users-cog mr-2"></i> Create Agent Group
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="">
|
|
<span className="status-indicator"></span>
|
|
<span className="status-text">State: <span className="status-value">active</span></span>
|
|
</div>
|
|
|
|
<div className="mobile-menu-toggle" onClick={toggleMobileMenu}>
|
|
<i className="fas fa-bars"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="mobile-menu" style={{ backgroundColor: 'var(--darker-bg)', borderTop: '1px solid var(--medium-bg)' }}>
|
|
<ul className="mobile-nav-links">
|
|
<li>
|
|
<Link to="/" className="mobile-nav-link" onClick={() => setMobileMenuOpen(false)}>
|
|
<i className="fas fa-home mr-2"></i> Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/agents" className="mobile-nav-link" onClick={() => setMobileMenuOpen(false)}>
|
|
<i className="fas fa-users mr-2"></i> Agent List
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/actions-playground" className="mobile-nav-link" onClick={() => setMobileMenuOpen(false)}>
|
|
<i className="fas fa-bolt mr-2"></i> Actions Playground
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/group-create" className="mobile-nav-link" onClick={() => setMobileMenuOpen(false)}>
|
|
<i className="fas fa-users-cog mr-2"></i> Create Agent Group
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{/* Toast Notification */}
|
|
{toast.visible && (
|
|
<div className={`toast ${toast.type}`}>
|
|
<span>{toast.message}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Content Area */}
|
|
<main className="main-content">
|
|
<div className="container">
|
|
<Outlet context={{ showToast }} />
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|