60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import useFullScreen from "../../store/useFullScreen";
|
|
import useModal from "../../store/useModal";
|
|
import Button from "../Button";
|
|
import HintIcon from "../icons/HintIcon";
|
|
import ResizeIcon from "../icons/ResizeIcon";
|
|
import HelpModal from "../modals/HelpModal";
|
|
import ActiveResizeIcon from "../icons/ActiveResizeIcon";
|
|
|
|
const TopPanel = () => {
|
|
const { setModal } = useModal();
|
|
const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
|
|
|
|
const handleOnHelpClick = () => {
|
|
setModal(<HelpModal />);
|
|
};
|
|
|
|
const handleOnFullScreenClick = () => {
|
|
if (!onFullscreen) return;
|
|
|
|
setIsFullscreen(!isFullscreen);
|
|
if (!isFullscreen) {
|
|
onFullscreen.enter();
|
|
} else {
|
|
onFullscreen.exit();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="absolute top-0 w-screen z-10 select-none pointer-events-none touch-none">
|
|
<img src="/images/top_shadow.png" className="w-screen" alt="" />
|
|
</div>
|
|
<div
|
|
className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
|
|
>
|
|
{isFullscreen ? (
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<ActiveResizeIcon />}
|
|
onClick={handleOnFullScreenClick}
|
|
/>
|
|
) : (
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<ResizeIcon />}
|
|
onClick={handleOnFullScreenClick}
|
|
/>
|
|
)}
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<HintIcon />}
|
|
onClick={handleOnHelpClick}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TopPanel;
|