68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import useStore from "../../../store/store";
|
|
import UnitList from "../../UnitList";
|
|
import LayoutSlider from "../../mobile/Appartment/LayoutSlider";
|
|
import { LayoutToggle } from "../../LayoutToggle";
|
|
import CrossButton from "../../CrossButton";
|
|
|
|
const LayoutModal = () => {
|
|
const [currentView, setCurrentView] = useState(1);
|
|
const [startIndex, setStartIndex] = useState(0);
|
|
const { currentVilla, setModalAnimation } = useStore();
|
|
const [currentUnits, setCurrentUnits] = useState(
|
|
currentVilla?.groundFloorUnits
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (currentVilla) {
|
|
switch (currentView) {
|
|
case 3:
|
|
setCurrentUnits(currentVilla.parkingUnits);
|
|
setStartIndex(currentVilla.groundFloorUnits.length);
|
|
break;
|
|
case 2:
|
|
setCurrentUnits(currentVilla.firstFloorUnits);
|
|
setStartIndex(0);
|
|
break;
|
|
default:
|
|
setCurrentUnits(currentVilla.groundFloorUnits);
|
|
setStartIndex(0);
|
|
break;
|
|
}
|
|
}
|
|
}, [currentView, currentVilla]);
|
|
|
|
const handleOnCloseClick = () => {
|
|
setModalAnimation(1);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex overflow-x-hidden w-screen bg-white h-screen justify-center">
|
|
<div className="flex">
|
|
{currentUnits && (
|
|
<UnitList units={currentUnits} startIndex={startIndex} />
|
|
)}
|
|
<div className="w-full flex flex-col p-8 h-screen">
|
|
<LayoutSlider
|
|
currentView={currentView}
|
|
setCurrentView={setCurrentView}
|
|
/>
|
|
<LayoutToggle
|
|
className="max-w-[340px] mx-auto"
|
|
currentView={currentView}
|
|
setCurrentView={setCurrentView}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between pt-8 pr-8 absolute z-20 left-0 top-0 w-full">
|
|
<div />
|
|
<CrossButton onClick={handleOnCloseClick} />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LayoutModal;
|