Shiloh/old-shiloh-website
Shiloh/old-shiloh-website
Archived
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a Link component to the index.js Learn more

Browse Source 
buttons with a prop on them to change there.
This commit is contained in:
Caretaker0699 2023-04-18 12:36:33 -07:00
parent e2d3a21ca8
commit 46137cf883
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Components/Layout/section.jsx
View File

@ -1,7 +1,15 @@
import React, { useEffect, useRef, useState } from "react";
import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx";
import Link from "next/link";
const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => {
const Section = ({
videoUrl,
text,
videoId,
buttonOneText,
buttonTwoText,
buttonLink = "/", // add a default value,
}) => {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
@ -11,7 +19,7 @@ const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => {
rootMargin: "0px",
threshold: 0.5,
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
@ -23,11 +31,11 @@ const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => {
}
});
}, options);
if (videoRef.current) {
observer.observe(videoRef.current);
}
return () => {
if (videoRef.current) {
observer.unobserve(videoRef.current);
@ -50,14 +58,14 @@ const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => {
<h1 className="text-6xl font-normal text-white">{text}</h1>
</div>
<div className="flex justify-start space-x-4">
<VideoButton videoId={videoId} buttonOneText={buttonOneText}/>
<button 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}
</button>
<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 Section;
export default Section;

7
pages/index.js
View File

@ -2,7 +2,6 @@
import React from "react";
import Navbar from "../Components/Layout/navbar.jsx";
import Section from "../Components/Layout/section.jsx"
import { motion } from "framer-motion";
export default function Home() {
@ -15,6 +14,7 @@ export default function Home() {
text="redemptive tech in Jesus' name"
buttonTwoText="learn more"
buttonOneText="watch" videoId="uu01xBw_BVE"
buttonLink="/about"
/>
<Section
key="section1"
@ -22,6 +22,7 @@ export default function Home() {
text="about"
buttonOneText="watch"
buttonTwoText="learn more"
buttonLink="/about"
/>
<Section
key="section2"
@ -29,6 +30,7 @@ export default function Home() {
text="get involved"
buttonOneText="watch"
buttonTwoText="learn more"
buttonLink="/getinvolved"
/>
<Section
key="section3"
@ -36,6 +38,7 @@ export default function Home() {
text="projects"
buttonOneText="watch"
buttonTwoText="learn more"
buttonLink="/projects"
/>
<Section
key="section4"
@ -43,6 +46,7 @@ export default function Home() {
text="hire us"
buttonOneText="watch"
buttonTwoText="learn more"
buttonLink="/contactus"
/>
<Section
key="section5"
@ -50,6 +54,7 @@ export default function Home() {
text="contact us"
buttonOneText="watch"
buttonTwoText="learn more"
buttonLink="/contactus"
/>
</>
);