104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import useModal from "../store/useModal";
|
|
import Button from "./Button";
|
|
import FilterIcon from "./icons/FilterIcon";
|
|
import HintIcon from "./icons/HintIcon";
|
|
import LeftArrowSliderIcon from "./icons/LeftArrowSliderIcon";
|
|
import ResizeIcon from "./icons/ResizeIcon";
|
|
import HelpModal from "./modals/HelpModal";
|
|
import MasterplanFilters from "./modals/MasterplanFilters";
|
|
import InfoIcon from "./icons/InfoIcon";
|
|
import useFullScreen from "../store/useFullScreen";
|
|
import ActiveResizeIcon from "./icons/ActiveResizeIcon";
|
|
|
|
const ComplexTopPanel = () => {
|
|
const [isFullMode, setIsFullMode] = useState(false);
|
|
const { setModal } = useModal();
|
|
const { onFullscreen } = useFullScreen();
|
|
const navigate = useNavigate();
|
|
|
|
const handleOnHelpClick = () => {
|
|
setModal(<HelpModal />);
|
|
};
|
|
|
|
const handleOnFiltersClick = () => {
|
|
setModal(<MasterplanFilters />);
|
|
};
|
|
|
|
const handleOnBackClick = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const handleOnFullScreenClick = () => {
|
|
if (!onFullscreen) return;
|
|
|
|
setIsFullMode((prev) => !prev);
|
|
if (!isFullMode) {
|
|
onFullscreen.enter();
|
|
} else {
|
|
onFullscreen.exit();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="absolute top-0 w-screen z-20 select-none pointer-events-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 grid grid-cols-12 select-none touch-none pointer-events-none`}
|
|
>
|
|
<div className="flex gap-2 col-span-3">
|
|
<Button
|
|
icon={<LeftArrowSliderIcon />}
|
|
buttonType="cta"
|
|
onClick={handleOnBackClick}
|
|
/>
|
|
<Button
|
|
icon={<FilterIcon />}
|
|
buttonType="primary"
|
|
text="Filters"
|
|
onClick={handleOnFiltersClick}
|
|
/>
|
|
<Button
|
|
icon={<InfoIcon />}
|
|
buttonType="primary"
|
|
text="About Complex"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col col-start-6 col-span-2 text-white text-center">
|
|
<h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
|
|
ROVE Home Marasi Drive
|
|
</h2>
|
|
<p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
|
|
Select a wing
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2 col-span-2 col-start-11 justify-end">
|
|
{isFullMode ? (
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<ActiveResizeIcon />}
|
|
onClick={handleOnFullScreenClick}
|
|
/>
|
|
) : (
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<ResizeIcon />}
|
|
onClick={handleOnFullScreenClick}
|
|
/>
|
|
)}
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<HintIcon />}
|
|
onClick={handleOnHelpClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ComplexTopPanel;
|