65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import useModal from "../../store/useModal";
|
|
import Button from "../Button";
|
|
import CrossIcon from "../icons/CrossIcon";
|
|
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
|
|
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
|
|
|
|
const HelpModal = () => {
|
|
const { setModal } = useModal();
|
|
|
|
const handleOnCloseClick = () => setModal(null);
|
|
|
|
return (
|
|
<div className="absolute z-[99999901] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
|
|
<div className="h-full col-span-3 col-start-10 bg-[#F3F3F2] py-6 px-6 flex flex-col justify-between items-center">
|
|
<div className="flex flex-col gap-8">
|
|
<div className="flex justify-between pb-4 border-b border-[#E2E2DC]">
|
|
<h2 className="text-subheadline-m font-semibold">
|
|
Tips for working
|
|
</h2>
|
|
<Button
|
|
icon={<CrossIcon />}
|
|
buttonType="fab"
|
|
onClick={handleOnCloseClick}
|
|
isCircleRounded
|
|
/>
|
|
</div>
|
|
<img
|
|
src="/images/masterplan/help/1.png"
|
|
alt="1"
|
|
className="rounded-2xl"
|
|
/>
|
|
<div className="flex flex-col gap-2 text-[#0D1922]">
|
|
<h2 className="text-subheadline-m font-semibold">1. Workspace</h2>
|
|
<p className="text-m">
|
|
For more comfortable work with the general plan, size it to the
|
|
full screen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-8">
|
|
<Button
|
|
icon={<LeftArrowSliderIcon />}
|
|
buttonType="fab"
|
|
className="text-black"
|
|
/>
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
|
|
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
|
|
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
|
|
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
|
|
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
|
|
</div>
|
|
<Button
|
|
icon={<RightArrowSliderIcon />}
|
|
buttonType="fab"
|
|
className="text-black"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HelpModal;
|