64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import SuccessModal from "../../sections/SuccessModal";
|
|
import LoadingModal from "../../sections/LoadingModal";
|
|
import xButton from "@/images/icon-x.svg";
|
|
import ModalLearnMoreForm from "../../sections/ModalLearnMore/ModalLearnMoreForm";
|
|
import Image from "next/image";
|
|
import { ModalStatus } from "@/types";
|
|
|
|
function ModalLearnMore() {
|
|
const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
|
|
const whenModalOpens = () =>
|
|
setTimeout(() => setStatus(ModalStatus.Default), 500);
|
|
|
|
return (
|
|
<>
|
|
<input
|
|
type="checkbox"
|
|
id="learn-more-modal"
|
|
className="modal-toggle"
|
|
onChange={whenModalOpens}
|
|
/>
|
|
<label htmlFor="learn-more-modal" className="modal cursor-pointer">
|
|
<label className="modal-box relative bg-gray-850 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={() => setStatus(ModalStatus.Default)}
|
|
htmlFor="learn-more-modal"
|
|
className="cursor-pointer"
|
|
>
|
|
<Image
|
|
className="rounded-full p-1 hover:bg-gray-500"
|
|
src={xButton}
|
|
alt="learnmore"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className={status === "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="bg-base-content pt-4 pb-2 text-lg md:text-3xl pt-6">
|
|
Want to learn more? Get the no-nonsense facts straight from the
|
|
source
|
|
</h3>
|
|
<p className="text-xs bg-base-content md:text-base">
|
|
Enter your email and we will email you a copy of our Whitepaper
|
|
</p>
|
|
</div>
|
|
|
|
<ModalLearnMoreForm setStatus={setStatus} />
|
|
</div>
|
|
{status === ModalStatus.Success && <SuccessModal />}
|
|
{status === ModalStatus.Loading && <LoadingModal />}
|
|
</label>
|
|
</label>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalLearnMore;
|