97 lines
2.8 KiB
TypeScript
97 lines
2.8 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("../masterplan");
|
|
};
|
|
|
|
const handleOnFullScreenClick = () => {
|
|
if (!onFullscreen) return;
|
|
|
|
setIsFullMode((prev) => !prev);
|
|
if (!isFullMode) {
|
|
onFullscreen.enter();
|
|
} else {
|
|
onFullscreen.exit();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`absolute ${
|
|
isFullMode ? "" : "top-[62px]"
|
|
} left-0 z-20 w-full p-4 grid grid-cols-12`}
|
|
>
|
|
<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-bold 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;
|