52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import {
|
|
SetStateAction,
|
|
createContext,
|
|
useEffect,
|
|
useState,
|
|
Dispatch,
|
|
} from "react";
|
|
|
|
interface MobileModalWrapperContext {
|
|
setIsAnimate: Dispatch<SetStateAction<boolean>> | null;
|
|
isAnimate: boolean | null;
|
|
}
|
|
|
|
export const MobileModalWrapperContext =
|
|
createContext<MobileModalWrapperContext>({
|
|
setIsAnimate: null,
|
|
isAnimate: null,
|
|
});
|
|
|
|
interface MobileModalWrapperProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const MobileModalWrapper = ({ children }: MobileModalWrapperProps) => {
|
|
const [isAnimate, setIsAnimate] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsAnimate(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={`h-screen w-screen pt-20 absolute z-[99999999] top-0 transition-all duration-300 ease-in-out ${
|
|
isAnimate ? "backdrop-blur-sm bg-[#0D192266]" : "backdrop-blur-none"
|
|
}`}
|
|
>
|
|
<div
|
|
className="h-full w-full transition-transform duration-300 ease-in-out"
|
|
style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
|
|
>
|
|
<MobileModalWrapperContext.Provider
|
|
value={{ isAnimate: isAnimate, setIsAnimate: setIsAnimate }}
|
|
>
|
|
{children}
|
|
</MobileModalWrapperContext.Provider>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { MobileModalWrapper };
|