74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { Link } from "react-router";
|
|
import Logo from "/MAV.svg";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { 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 { state } = useIntegrationsContext();
|
|
|
|
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">
|
|
{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-8">
|
|
<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 />
|
|
<Link to={"/session-settings"}>
|
|
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
|
|
</Link>
|
|
|
|
<Link to={"/system-settings"}>
|
|
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|