55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { useState } from "react";
|
|
// import { useSwipeable } from "react-swipeable";
|
|
import SkygardenIndoorLayout from "./SkygardenIndoorLayout";
|
|
import { ISwitchLabel } from "../../../types/switchLabel";
|
|
import SwitchToggle from "../../SwitchToggle";
|
|
import SkygardenOutdoorLayout from "./SkygardenOutdoorLayout";
|
|
|
|
const skygardenLayouts: ISwitchLabel[] = [
|
|
{ id: "1", label: "Indoor" },
|
|
{ id: "2", label: "Outdoor" },
|
|
];
|
|
|
|
const LayoutSlider = () => {
|
|
const [currentLabel, setCurrentLabel] = useState<ISwitchLabel>(
|
|
skygardenLayouts[0]
|
|
);
|
|
|
|
const handleOnSwitchClick = (label: ISwitchLabel) => {
|
|
setCurrentLabel(label);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<SwitchToggle
|
|
labels={skygardenLayouts}
|
|
currentLabel={currentLabel}
|
|
onClick={handleOnSwitchClick}
|
|
/>
|
|
<div className="flex w-full overflow-x-hidden max-w-[1100px] mx-auto overflow-hidden select-none pt-6">
|
|
<div
|
|
className="flex w-full transition-all duration-300"
|
|
style={{
|
|
transform: `translateX(${
|
|
0 + (Number(currentLabel.id) - 1) * -100
|
|
}%)`,
|
|
}}
|
|
>
|
|
<div
|
|
className={`min-w-full flex flex-col px-6 transition-all duration-300 items-center`}
|
|
>
|
|
<SkygardenIndoorLayout />
|
|
</div>
|
|
<div
|
|
className={`min-w-full flex flex-col px-6 transition-all duration-300 items-center`}
|
|
>
|
|
<SkygardenOutdoorLayout />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LayoutSlider;
|