@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
42 lines • 1.56 kB
JSX
"use client";
import { useEffect, useState } from "react";
import Style, { Part } from "./PartContainer.styled";
export default function PartContainer(props) {
const [state, setState] = useState(props?.state);
useEffect(() => {
return () => {
setState(null);
};
}, []);
useEffect(() => {
setState(props?.state);
}, [props?.state]);
useEffect(() => {
switch (state) {
case true:
if (typeof props?.right?.onClick === "function")
props?.right?.onClick();
break;
case false:
if (typeof props?.left?.onClick === "function")
props?.left?.onClick();
break;
default:
if (typeof props?.onBack === "function")
props?.onBack();
break;
}
}, [state, props?.left?.onClick, props?.right?.onClick, props?.onBack]);
return (<Style $state={state} style={props?.style}>
<div style={{
transform: `translateX(${typeof state === "undefined" || state === null ? "-33.333%" : state ? "-66.666%" : "0"}`,
}}>
<Part $state={state === false} style={{}}>
{props?.left?.children}
</Part>
<Part $state={state === null}>{props?.content}</Part>
<Part $state={state === true}>{props?.right?.children}</Part>
</div>
</Style>);
}
//# sourceMappingURL=PartContainer.jsx.map