67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef, useState } from "react";
|
|
import ModalSignInForm, {
|
|
FormRefMethods,
|
|
} from "@/sections/ModalSignIn/ModalSignInForm";
|
|
import SuccessModal from "@/sections/SuccessModal";
|
|
import LoadingModal from "@/sections/LoadingModal";
|
|
import { ModalStatus } from "@/types";
|
|
import Icon from "@/components/icon";
|
|
|
|
function ModalSignIn() {
|
|
const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
|
|
const formRef = useRef<FormRefMethods>(null);
|
|
const handleCloseModal = () => {
|
|
if (formRef.current) {
|
|
formRef.current.resetForm();
|
|
}
|
|
setStatus(ModalStatus.Default);
|
|
};
|
|
return (
|
|
<>
|
|
<input
|
|
type="checkbox"
|
|
id="sign-in-modal"
|
|
className="modal-toggle"
|
|
name=""
|
|
/>
|
|
<label htmlFor="sign-in-modal" className="modal cursor-pointer">
|
|
<label className="modal-box relative bg-gray-100 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
|
|
<div className="flex justify-end pb-2 select-none">
|
|
<label
|
|
onClick={handleCloseModal}
|
|
htmlFor="sign-in-modal"
|
|
className="cursor-pointer"
|
|
>
|
|
<Icon name="Dismiss20Filled" size="medium" />
|
|
</label>
|
|
</div>
|
|
<div className={status === ModalStatus.Default ? "block" : "hidden"}>
|
|
<div
|
|
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
|
|
data-aos="fade-up"
|
|
>
|
|
<h3 className="pt-4 pb-2 text-lg md:text-3xl pt-6">
|
|
{/* {textOnUse.title} */}
|
|
</h3>
|
|
<p className="text-xs md:text-base">
|
|
{/* {textOnUse.subTitle} */}
|
|
</p>
|
|
</div>
|
|
{/* <ModalSignInForm
|
|
textOnUse={"textOnUse"}
|
|
setStatus={setStatus}
|
|
ref={formRef}
|
|
/> */}
|
|
</div>
|
|
{status === ModalStatus.Success && <SuccessModal />}
|
|
{status === ModalStatus.Loading && <LoadingModal />}
|
|
</label>
|
|
</label>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalSignIn;
|