44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import Button3 from "./Button3";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
|
|
interface Props {
|
|
sidebarComponent: {
|
|
element: JSX.Element;
|
|
name: "Floor" | "Rooftop" | "Sky Garden" | "Podium Level" | "Ground Level";
|
|
desc?: string;
|
|
} | null;
|
|
onClose: () => void;
|
|
}
|
|
|
|
function FloorSidebarContainer({ sidebarComponent, onClose }: Props) {
|
|
const [component, setComponent] = useState(sidebarComponent);
|
|
|
|
useEffect(() => {
|
|
if (!sidebarComponent) return;
|
|
setComponent(sidebarComponent);
|
|
}, [sidebarComponent]);
|
|
|
|
return (
|
|
<div
|
|
className={`fixed top-[54px] right-0 lg:w-1/2 w-full bg-[#F3F3F2] h-[calc(100dvh-54px)] flex flex-col p-6 space-y-6 transition-all duration-300 z-10 ${
|
|
sidebarComponent ? "opacity-100 " : "opacity-50 translate-x-full"
|
|
} ${component?.name !== "Floor" ? "overflow-auto" : ""}`}
|
|
>
|
|
<div className="flex justify-between">
|
|
<div className="self-center">
|
|
<p className="text-2xl font-semibold text-[#0D1922]">
|
|
{component?.name === "Floor" ? `${component.element.props.floor} floor` : component?.name}
|
|
</p>
|
|
<p className="text-sm">{component?.desc}</p>
|
|
</div>
|
|
<Button3 icon={<CloseIcon className="w-5 h-5" />} onlyIcon onClick={onClose} className="self-start" />
|
|
</div>
|
|
|
|
{component?.element}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FloorSidebarContainer;
|