55 lines
1.5 KiB
React
55 lines
1.5 KiB
React
import React from 'react';
|
||
import './Header.css';
|
||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||
import {
|
||
faGripVertical,
|
||
faBoxOpen,
|
||
faMousePointer,
|
||
faBoxes,
|
||
faCog,
|
||
faBoxArchive,
|
||
faBox,
|
||
faWarehouse,
|
||
faGraduationCap,
|
||
faCubesStacked,
|
||
faBorderAll,
|
||
faBagShopping
|
||
} from '@fortawesome/free-solid-svg-icons';
|
||
|
||
function Header({ activePage, setActivePage, minimizeToTray, quitApp }) {
|
||
// Navigation buttons for each page with icons
|
||
const navItems = [
|
||
{ id: 'inventory', icon: faBagShopping, tooltip: 'Inventory' },
|
||
{ id: 'cursors', icon: faMousePointer, tooltip: 'Cursors' },
|
||
{ id: 'crates', icon: faBoxOpen, tooltip: 'Crates' },
|
||
{ id: 'settings', icon: faCog, tooltip: 'Settings' }
|
||
];
|
||
|
||
return (
|
||
<header className="app-header" data-tauri-drag-region>
|
||
<div className="tabs-container">
|
||
{navItems.map((item) => (
|
||
<div
|
||
key={item.id}
|
||
className={`tab ${activePage === item.id ? 'active' : ''}`}
|
||
onClick={() => setActivePage(item.id)}
|
||
title={item.tooltip}
|
||
>
|
||
<FontAwesomeIcon icon={item.icon} />
|
||
</div>
|
||
))}
|
||
<div className="window-controls">
|
||
<button className="minimize-button" onClick={minimizeToTray} title="Minimize to Tray">
|
||
_
|
||
</button>
|
||
<button className="close-button" onClick={quitApp} title="Quit Application">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
export default Header;
|