105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
import { Link } from "react-router";
|
|
import Logo from "/MAV.svg";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import {
|
|
faBars,
|
|
faGear,
|
|
faHome,
|
|
faListCheck,
|
|
faMaximize,
|
|
faMinimize,
|
|
faRotate,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { useState } from "react";
|
|
import SoundBtn from "./SoundBtn";
|
|
import { useIntegrationsContext } from "../../context/IntegrationsContext";
|
|
|
|
export default function Header() {
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const { state } = useIntegrationsContext();
|
|
|
|
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
|
|
|
|
const sessionStarted = state.sessionStarted;
|
|
|
|
const sessionPaused = state.sessionPaused;
|
|
|
|
const toggleFullscreen = () => {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
setIsFullscreen(true);
|
|
} else {
|
|
document.exitFullscreen();
|
|
setIsFullscreen(false);
|
|
}
|
|
};
|
|
|
|
const refreshBrowser = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto sm:px-3 lg:px-4 py-4 flex flex-col md:flex-row justify-between mb-7 space-y-6 md:space-y-0">
|
|
<div className="w-28">
|
|
<Link to={"/"}>
|
|
<img src={Logo} alt="Logo" width={150} height={150} />
|
|
</Link>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
|
|
<div className="flex flex-row lg:flex-row space-x-2 mx-10 p-2 md:p-0 items-center">
|
|
{sessionStarted && sessionPaused ? (
|
|
<p className="text-gray-400 font-bold">Session Paused</p>
|
|
) : (
|
|
sessionStarted && <p className="text-green-400 font-bold">Session Active</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-row space-x-6 md:space-x-8 items-center">
|
|
<Link to={"/"}>
|
|
<FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
|
|
</Link>
|
|
<div onClick={toggleFullscreen} className="flex flex-col">
|
|
{isFullscreen ? (
|
|
<FontAwesomeIcon icon={faMinimize} size="2x" />
|
|
) : (
|
|
<FontAwesomeIcon icon={faMaximize} size="2x" />
|
|
)}
|
|
</div>
|
|
<div onClick={refreshBrowser}>
|
|
<FontAwesomeIcon icon={faRotate} size="2x" />
|
|
</div>
|
|
<SoundBtn />
|
|
<div className="md:hidden">
|
|
<FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
|
|
</div>
|
|
|
|
<Link className="hidden md:flex" to={"/session-settings"}>
|
|
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
|
|
</Link>
|
|
|
|
<Link className="hidden md:flex" to={"/system-settings"}>
|
|
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
{isMenuOpen && (
|
|
<div className="md:hidden">
|
|
<ul className="flex flex-row gap-5">
|
|
<li onClick={() => setIsMenuOpen(false)}>
|
|
<Link to={"/session-settings"}>
|
|
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
|
|
</Link>
|
|
</li>
|
|
<li onClick={() => setIsMenuOpen(false)}>
|
|
<Link to={"/system-settings"}>
|
|
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|