54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import CursorIcon from "../../../../icons/CursorIcon";
|
|
import MouseIcon from "../../../../icons/MouseIcon";
|
|
import CrossButton from "../../../CrossButton";
|
|
import LookAroundButton from "./LookAroundButton";
|
|
|
|
type ThreeDTourHelpModalProps = {
|
|
onClick: () => void;
|
|
currentViewTitle: string;
|
|
};
|
|
|
|
const ThreeDTourHelpModal = ({
|
|
onClick,
|
|
currentViewTitle,
|
|
}: ThreeDTourHelpModalProps) => {
|
|
const [t] = useTranslation();
|
|
return (
|
|
<div className="absolute h-screen w-screen bg-black bg-opacity-30 z-10 flex justify-center items-center select-none pointer-events-auto">
|
|
<div className="w-[536px] min-h-[344px] bg-white rounded-[16px] flex flex-col py-8 px-10">
|
|
<div className="flex justify-between">
|
|
<div className="text-[#858585] text-xl font-bold">
|
|
{currentViewTitle}
|
|
</div>
|
|
<CrossButton onClick={onClick} />
|
|
</div>
|
|
<div className="flex flex-col gap-4 pb-8">
|
|
<h2 className="text-[#333] text-[32px] font-bold">
|
|
{t("ControlHelp")}
|
|
</h2>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
|
|
<MouseIcon />{" "}
|
|
</div>
|
|
<div>{t("ClickAndHoldTheLeftMouseButtonToLookAround")}</div>
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="min-w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
|
|
<CursorIcon />{" "}
|
|
</div>
|
|
<div>
|
|
{t(
|
|
"PlaceTheCursorOnASectionOfTheFloorAndClickTheLeftMouseButtonToMoveAroundThe3DScene"
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<LookAroundButton onClick={onClick} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ThreeDTourHelpModal;
|