140 lines
4.3 KiB
TypeScript
140 lines
4.3 KiB
TypeScript
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";
|
|
import useWingSidebar from "../../store/useWingSidebar";
|
|
import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
|
|
import MasterplanFiltersModal from "../modals/mobile/MasterplanFiltersModal";
|
|
|
|
const ComplexTopPanel = () => {
|
|
const { setModal } = useModal();
|
|
const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
|
|
const { setIsSidebar, isSidebar } = useWingSidebar();
|
|
const navigate = useNavigate();
|
|
|
|
const handleOnHelpClick = () => {
|
|
setModal(<HelpModal />);
|
|
};
|
|
|
|
// const handleOnFiltersClick = () => {
|
|
// setModal(<MasterplanFilters />);
|
|
// };
|
|
|
|
const handleOnMobileFiltersClick = () => {
|
|
setModal(
|
|
<MobileModalWrapper>
|
|
<MasterplanFiltersModal />
|
|
</MobileModalWrapper>
|
|
);
|
|
};
|
|
|
|
const handleOnBackClick = () => {
|
|
if (isSidebar) {
|
|
setIsSidebar(false);
|
|
} else {
|
|
navigate(-1);
|
|
}
|
|
};
|
|
|
|
const handleOnFullScreenClick = () => {
|
|
if (!onFullscreen) return;
|
|
|
|
setIsFullscreen(!isFullscreen);
|
|
if (!isFullscreen) {
|
|
onFullscreen.enter();
|
|
} else {
|
|
onFullscreen.exit();
|
|
}
|
|
};
|
|
|
|
const handleOnAboutComplexClick = () => {
|
|
navigate(`../aboutComplex`);
|
|
};
|
|
|
|
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 sm:col-span-5 col-span-7">
|
|
<Button
|
|
icon={<LeftArrowSliderIcon />}
|
|
buttonType="cta"
|
|
onClick={handleOnBackClick}
|
|
/>
|
|
<Button
|
|
className="hidden lg:flex"
|
|
icon={<FilterIcon />}
|
|
buttonType="primary"
|
|
text="Filters"
|
|
onClick={handleOnMobileFiltersClick}
|
|
/>
|
|
<Button
|
|
className="lg:hidden flex"
|
|
icon={<FilterIcon />}
|
|
buttonType="primary"
|
|
text="Filters"
|
|
onClick={handleOnMobileFiltersClick}
|
|
/>
|
|
<Button
|
|
icon={<InfoIcon />}
|
|
buttonType="primary"
|
|
text="About Complex"
|
|
onClick={handleOnAboutComplexClick}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col sm:col-start-6 col-start-8 sm:col-span-4 col-span-4 text-white text-center items-start ">
|
|
<div
|
|
className={`text-center duration-300 ease-in-out transition-opacity hidden lg:block ${
|
|
isSidebar ? "opacity-0" : "opacity-100"
|
|
}`}
|
|
>
|
|
<h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
|
|
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>
|
|
<div className="flex gap-2 col-span-1 col-start-12 justify-end">
|
|
{isFullscreen ? (
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<ActiveResizeIcon />}
|
|
onClick={handleOnFullScreenClick}
|
|
isCircleRounded
|
|
/>
|
|
) : (
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<ResizeIcon />}
|
|
onClick={handleOnFullScreenClick}
|
|
isCircleRounded
|
|
/>
|
|
)}
|
|
<Button
|
|
buttonType="fab"
|
|
icon={<HintIcon />}
|
|
onClick={handleOnHelpClick}
|
|
isCircleRounded
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ComplexTopPanel;
|