tony
7de4b7bbfa
installed three js added test model to contact form section fixed issue with double render of useEffect that was causing it to show up twice once compiled. This was resolved using a boolean check to see if it is mounted first. n Next.js, when you navigate between pages, the entire React tree is unmounted and then remounted. This means that any component with a useEffect hook will run its cleanup function before being unmounted, and then its effect function again when it is remounted. This can cause the effect to run twice.
36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx";
|
|
import Link from "next/link";
|
|
import ContactThreeJsComponent from "../Elements/ContactThreeJsComponent.jsx";
|
|
|
|
const ContactFormSection = ({
|
|
text,
|
|
videoId,
|
|
buttonOneText,
|
|
buttonTwoText,
|
|
buttonLink = "/", // add a default value,
|
|
}) => {
|
|
|
|
return (
|
|
<div className="relative z-10 h-screen w-screen">
|
|
<div className="absolute inset-0 z-0">
|
|
<ContactThreeJsComponent />
|
|
</div>
|
|
<div className="relative z-10 flex flex-col items-center justify-center h-full">
|
|
<div className="relative flex justify-center items-end w-full mb-20">
|
|
<h1 className="text-6xl font-normal text-white">{text}</h1>
|
|
</div>
|
|
<div className="flex justify-start space-x-4">
|
|
<VideoButton videoId={videoId} buttonOneText={buttonOneText} />
|
|
<Link
|
|
href={buttonLink}
|
|
className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none"
|
|
>
|
|
{buttonTwoText}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactFormSection; |