Styles updated for responsiveness, added EmailButton and CopyButton components, added photo of pastor and Pam
parent
e8e1915830
commit
66c935dfa5
|
|
@ -4,6 +4,6 @@ echo "building app..."
|
|||
npm run build
|
||||
|
||||
echo "Deploying files to server"
|
||||
scp -r dist/* jeremy@154.56.60.138:/var/www/trailblazer.shop/
|
||||
scp -r dist/* jeremy@154.56.60.138:/var/www/northshrevebaptist.org/
|
||||
|
||||
echo "DONE!"
|
||||
echo "DONE!"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.11.0",
|
||||
"react-router-dom": "^6.16.0",
|
||||
|
|
@ -1515,6 +1516,14 @@
|
|||
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/copy-to-clipboard": {
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
|
||||
"integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
|
||||
"dependencies": {
|
||||
"toggle-selection": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
|
|
@ -3219,7 +3228,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -3636,7 +3644,6 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
|
|
@ -3683,6 +3690,18 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-copy-to-clipboard": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
|
||||
"integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
|
||||
"dependencies": {
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || 16 || 17 || 18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
|
|
@ -3706,8 +3725,7 @@
|
|||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.0",
|
||||
|
|
@ -4278,6 +4296,11 @@
|
|||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/toggle-selection": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
|
||||
"integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
|
||||
},
|
||||
"node_modules/ts-interface-checker": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
||||
|
|
@ -5599,6 +5622,14 @@
|
|||
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"copy-to-clipboard": {
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
|
||||
"integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
|
||||
"requires": {
|
||||
"toggle-selection": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
|
|
@ -6850,8 +6881,7 @@
|
|||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
|
||||
},
|
||||
"object-hash": {
|
||||
"version": "3.0.0",
|
||||
|
|
@ -7118,7 +7148,6 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
|
|
@ -7145,6 +7174,15 @@
|
|||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-copy-to-clipboard": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
|
||||
"integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
|
||||
"requires": {
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
|
|
@ -7163,8 +7201,7 @@
|
|||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.14.0",
|
||||
|
|
@ -7573,6 +7610,11 @@
|
|||
"is-number": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"toggle-selection": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
|
||||
"integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
|
||||
},
|
||||
"ts-interface-checker": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.11.0",
|
||||
"react-router-dom": "^6.16.0",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
|
|||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="h-fit py-6 px-5 grid grid-cols-4 gap-2 w-full items-center text-white border-b-2 border-gray-50 inset-0 bg-blue-900/70 backdrop-blur-sm dark:bg-slate-900/80">
|
||||
<div className="h-fit py-6 px-5 grid grid-cols-2 sm:grid-cols-4 gap-2 w-full items-center text-white border-b-2 border-gray-50 inset-0 bg-blue-900/70 backdrop-blur-sm dark:bg-slate-900/80">
|
||||
<div className="text-4xl">NSBC</div>
|
||||
<div>
|
||||
<ul className="text-sm">
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import React, { useState } from "react";
|
||||
import { FaSearch } from "react-icons/fa";
|
||||
import { Link } from "react-router-dom";
|
||||
import About from "../pages/About";
|
||||
import Contact from "../pages/Contact";
|
||||
import HelpfulLinks from "../pages/HelpfulLinks";
|
||||
import Home from "../pages/Home";
|
||||
import HowToBecomeAChristian from "../pages/HowToBecomeAChristian";
|
||||
import OnlineGiving from "../pages/OnlineGiving";
|
||||
import Services from "../pages/Services";
|
||||
import UpcomingEvents from "../pages/UpcomingEvents";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
const Sidebar = () => {
|
||||
const [menu, setMenu] = useState([
|
||||
const Sidebar = ( props) => {
|
||||
const navigate = useNavigate();
|
||||
const handleClick = (e, {to}) => {
|
||||
e.preventDefault();
|
||||
props.onClose(false);
|
||||
navigate(to);
|
||||
}
|
||||
const menu = [
|
||||
{
|
||||
name: "Home",
|
||||
path: "/",
|
||||
|
|
@ -23,67 +21,78 @@ const Sidebar = () => {
|
|||
{
|
||||
name: "Services",
|
||||
path: "/services",
|
||||
},{
|
||||
name: "About",
|
||||
path: "/about",
|
||||
},
|
||||
{
|
||||
name: "Church Staff",
|
||||
path: "/church-staff",
|
||||
}, {
|
||||
name: "Contact",
|
||||
path: "/contact",
|
||||
}, {
|
||||
name: "How to Become a Christian",
|
||||
path: "/become-a-christian",
|
||||
}, {
|
||||
name: "Online Giving",
|
||||
path: "/tithing",
|
||||
}, {
|
||||
name: "Helpful Links",
|
||||
path: "/links",
|
||||
},
|
||||
name: "About",
|
||||
path: "/about",
|
||||
},
|
||||
{
|
||||
name: "Church Staff",
|
||||
path: "/church-staff",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
path: "/contact",
|
||||
},
|
||||
{
|
||||
name: "How to Become a Christian",
|
||||
path: "/become-a-christian",
|
||||
},
|
||||
{
|
||||
name: "Online Giving",
|
||||
path: "/tithing",
|
||||
},
|
||||
{
|
||||
name: "Helpful Links",
|
||||
path: "/links",
|
||||
},
|
||||
// {
|
||||
// name: "Rocks Cry Out Youth Ministry",
|
||||
// path: "/rocks-cry-out-youth-ministry",
|
||||
// },
|
||||
]);
|
||||
// path: "/rocks-cry-out-youth-ministry",
|
||||
// },
|
||||
];
|
||||
return (
|
||||
<div className="">
|
||||
|
||||
<div
|
||||
id="sidebar"
|
||||
className="absolute px-3 py-5 z-40 bg-blue-900/95 w-full sm:w-fit min-h-screen h-[100vh] overflow-y-auto"
|
||||
className="px-3 py-5 min-h-screen z-40 bg-blue-900/95 "
|
||||
>
|
||||
<div>
|
||||
<div className="flex w-full">
|
||||
<form id="search-form" role="search">
|
||||
<input
|
||||
className="border bg-blue-200/20 text-white border-slate-200 py-1 px-2 rounded-l-md border-r-0"
|
||||
id="q"
|
||||
aria-label="Search contacts"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="q"
|
||||
/>
|
||||
<div id="search-spinner" aria-hidden hidden={true} />
|
||||
<div className="sr-only" aria-live="polite"></div>
|
||||
</form>
|
||||
<form method="post">
|
||||
<button
|
||||
className="border border-slate-200 rounded-r-md bg-blue-200/20 text-white border-l-0 py-2 px-2"
|
||||
type="submit"
|
||||
>
|
||||
<FaSearch />
|
||||
</button>
|
||||
</form>
|
||||
<div className="flex border bg-blue-200/20 text-white border-slate-200 rounded-md">
|
||||
<form id="search-form" role="search">
|
||||
<input
|
||||
className="w-fit py-1 px-2 bg-transparent outline-none"
|
||||
id="q"
|
||||
aria-label="Search contacts"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="q"
|
||||
/>
|
||||
<div id="search-spinner" aria-hidden hidden={true} />
|
||||
<div className="sr-only" aria-live="polite"></div>
|
||||
</form>
|
||||
<form method="post">
|
||||
<button
|
||||
className=" bg-transparent text-white border-l-0 py-2 px-2"
|
||||
type="submit"
|
||||
>
|
||||
<FaSearch />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul className="text-white mt-3">
|
||||
{menu.map((item) => (
|
||||
<li className="py-1 hover:border-b border-b-gray-200 " key={item.name}>
|
||||
<Link className="w-full" to={item.path}>{item.name}</Link>
|
||||
<li
|
||||
className="py-1 hover:border-b border-b-gray-200 "
|
||||
key={item.name}
|
||||
>
|
||||
<Link onClick={(e) => handleClick(e,{to: item.path})} className="w-full flex h-fit" >
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import React, { useState } from 'react'
|
||||
import { FaRegCopy } from 'react-icons/fa'
|
||||
import { copyTextToClipboard } from '../../helpers/copyTextToClipboard'
|
||||
|
||||
const CopyButton = ({ text, title } ) => {
|
||||
const [isCopied, setIsCopied] = useState(false)
|
||||
const handleCopyClick = () => {
|
||||
copyTextToClipboard(text)
|
||||
setIsCopied(true)
|
||||
setTimeout(() => {
|
||||
setIsCopied(false)
|
||||
}, 3000)
|
||||
}
|
||||
return (
|
||||
<button className='flex items-start gap-1' onClick={handleCopyClick} title={title}>
|
||||
<div className='flex items-center'>
|
||||
<FaRegCopy />
|
||||
</div>
|
||||
<div className='text-xs -mt-1'>
|
||||
{isCopied ? 'Copied' : 'Copy'}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default CopyButton
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import React from "react";
|
||||
import { FaEnvelope } from "react-icons/fa";
|
||||
|
||||
const EmailButton = ({email, label}) => {
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
title={label}
|
||||
className="px-2 flex items-center justify-center"
|
||||
href={"mailto:" + email}
|
||||
>
|
||||
<FaEnvelope />
|
||||
{label}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailButton;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react'
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
|
||||
const ImageModal = ({image, title, descripton, onClose}) => {
|
||||
const closeModal = (e) => {
|
||||
onClose(e)
|
||||
}
|
||||
return (
|
||||
<div className='fixed top-0 left-0 z-80 w-screen h-screen bg-black/70 flex justify-center items-center'>
|
||||
<button className="fixed z-90 top-24 right-8 text-white text-5xl font-bold"
|
||||
onClick={() => closeModal()}><FaTimes /></button>
|
||||
<img src={image} className="max-h-[600px] max-w-[800px] object-cover object-center"/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImageModal
|
||||
77
src/Root.jsx
77
src/Root.jsx
|
|
@ -1,31 +1,74 @@
|
|||
import React, { useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { AnimatePresence, motion, useCycle } from "framer-motion";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Navbar from "./Components/Navbar";
|
||||
import Sidebar from "./Components/Sidebar";
|
||||
import Footer from "./Components/Footer";
|
||||
|
||||
const itemVariants = {
|
||||
closed: {
|
||||
opacity: 0,
|
||||
},
|
||||
open: { opacity: 1 },
|
||||
};
|
||||
const sideVariants = {
|
||||
closed: {
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
staggerDirection: -1,
|
||||
},
|
||||
},
|
||||
open: {
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
staggerDirection: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
const Root = () => {
|
||||
const [sideBarOpen, setSideBarOpen] = useState(false);
|
||||
const [sideBarOpen, setSideBarOpen] = useCycle(false, true);
|
||||
const sideNav = useRef();
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event) {
|
||||
if (sideNav.current && !sideNav.current.contains(event.target)) {
|
||||
setSideBarOpen(false);
|
||||
}
|
||||
}
|
||||
// Bind the event listener
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
// Unbind the event listener on clean up
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [sideNav]);
|
||||
|
||||
return (
|
||||
<div className="xl:container mx-auto">
|
||||
<div className="xl:max-w-6xl mx-auto">
|
||||
<Navbar sideBarOpen={sideBarOpen} openSideBar={setSideBarOpen} />
|
||||
<div className="flex">
|
||||
<AnimatePresence>
|
||||
{sideBarOpen && (
|
||||
<div id="backdrop" className="w-full h-screen absolute top-0 left-0 bg-black/20" onClick={() => setSideBarOpen(false)}>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
style={{ originX: 0.5 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{}}
|
||||
duration="1.5s"
|
||||
<motion.aside
|
||||
className="fixed w-full sm:w-fit min-h-screen h-[100vh] overflow-y-auto z-40"
|
||||
ref={sideNav}
|
||||
initial={{ width: 0 }}
|
||||
animate={{
|
||||
width: 300,
|
||||
}}
|
||||
exit={{
|
||||
width: 0,
|
||||
transition: { delay: 0.7, duration: 0.3 },
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
className="container"
|
||||
initial="closed"
|
||||
animate="open"
|
||||
exit="closed"
|
||||
variants={sideVariants}
|
||||
>
|
||||
<Sidebar />
|
||||
</motion.div>
|
||||
</div>
|
||||
<Sidebar onClose={() => setSideBarOpen(false)} />
|
||||
</motion.div>
|
||||
</motion.aside>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div id="detail" className="py-3 mt-24 px-2 w-full">
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
export async function copyTextToClipboard(text) {
|
||||
if ('clipboard' in navigator) {
|
||||
return await navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
return document.execCommand('copy', true, text);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { useEffect } from 'react';
|
||||
|
||||
const useClickOutside = (ref, handleClickOutside) => {
|
||||
useEffect(() => {
|
||||
const handleClick = (event) => {
|
||||
if (ref.current && !ref.current.contains(event.target)) {
|
||||
handleClickOutside();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEscape = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
handleClickOutside();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClick);
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleClick);
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
};
|
||||
}, [ref, handleClickOutside]);
|
||||
};
|
||||
|
||||
export default useClickOutside;
|
||||
|
|
@ -1,65 +1,166 @@
|
|||
import React from "react";
|
||||
import SteveMiller from "../assets/SteveMiller.jpg";
|
||||
import React, { useState } from "react";
|
||||
import SteveMillerImage from "../assets/SteveMiller.jpg";
|
||||
import PastorImage from "../assets/PastorAndWifeSmall.png";
|
||||
import useDocumentTitle from "../hooks/useDocumentTitle";
|
||||
import CopyButton from "../Components/ui/CopyButton";
|
||||
import ImageModal from "../Components/ui/ImageModal";
|
||||
import EmailButton from "../Components/ui/EmailButton";
|
||||
const ChurchStaff = () => {
|
||||
useDocumentTitle('NSBC | Church Staff');
|
||||
|
||||
useDocumentTitle("NSBC | Church Staff");
|
||||
const jenniferCarter = {
|
||||
name: "Jennifer Carter",
|
||||
title: "Youth Director",
|
||||
phone: null,
|
||||
email: "jennifer@jubileezoo.com",
|
||||
imageSmall: "https://placehold.co/600x400",
|
||||
imageLarge: "https://placehold.co/600x400",
|
||||
person2: {
|
||||
name: "Don",
|
||||
title: "Husband",
|
||||
},
|
||||
};
|
||||
const SteveMiller = {
|
||||
name: "Steve Miller",
|
||||
title: "Worship Leader",
|
||||
phone: null,
|
||||
email: null,
|
||||
imageSmall: SteveMillerImage,
|
||||
imageLarge: SteveMillerImage,
|
||||
person2: null,
|
||||
};
|
||||
const PastorAndWifeSmall = {
|
||||
name: "Rev. Cecil Marr",
|
||||
title: "Pastor and Wife",
|
||||
phone: null,
|
||||
email: null,
|
||||
imageLarge: PastorImage,
|
||||
imageSmall: PastorImage,
|
||||
person2: {
|
||||
name: "Pam Marr",
|
||||
title: "Pianist",
|
||||
},
|
||||
};
|
||||
const lindaConnor = {
|
||||
name: "Linda Connor",
|
||||
title: "Ministry Assistant - Office Secretary",
|
||||
phone: null,
|
||||
email: "linda@northshrevebaptist.org",
|
||||
imageSmall: "https://placehold.co/600x400",
|
||||
imageLarge: "https://placehold.co/600x400",
|
||||
person2: {
|
||||
name: "David",
|
||||
title: "Husband",
|
||||
},
|
||||
};
|
||||
const staffArr = [
|
||||
PastorAndWifeSmall,
|
||||
SteveMiller,
|
||||
jenniferCarter,
|
||||
lindaConnor,
|
||||
];
|
||||
const [activeModalImage, setActiveModalImage] = useState(false);
|
||||
const [activeModalTitle, setActiveModalTitle] = useState(false);
|
||||
const handleModalOpen = (title, image) => {
|
||||
setActiveModalImage(image);
|
||||
setActiveModalTitle(title);
|
||||
setModalOpen(true);
|
||||
};
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl flex justify-center">Church Staff</h1>
|
||||
<div className="flex flex-col items-start ">
|
||||
<section className="grid grid-cols-2 gap-3 items-center p-4 bg-slate-100 w-full h-fit">
|
||||
<span>
|
||||
<h2 className="text-2xl">Pastor</h2>
|
||||
<p>Rev. Cecil Marr</p>
|
||||
</span>
|
||||
<div>
|
||||
<img src="https://placehold.co/600x400" />
|
||||
{staffArr.map((person, index) => (
|
||||
<div key={index} className="flex flex-col items-start">
|
||||
{index % 2 === 0 ? (
|
||||
<section className="grid grid-cols-2 gap-3 items-center p-4 bg-slate-100 w-full h-fit">
|
||||
<span>
|
||||
<h2 className="text-2xl">{person.title}</h2>
|
||||
<p>
|
||||
{person.name}
|
||||
{person.person2 && (
|
||||
<span>
|
||||
- {person.person2.name} - {person.person2.title}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<div className="flex items-center">
|
||||
{person.email && (
|
||||
<>
|
||||
<EmailButton
|
||||
email={jenniferCarter.email}
|
||||
label="Email Jennifer"
|
||||
/>
|
||||
<CopyButton
|
||||
text={jenniferCarter.email}
|
||||
title="Copy Jennifer Carter Email"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
<div>
|
||||
<span>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleModalOpen(person.title, person.imageLarge)
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
<img src={person.imageSmall} />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
|
||||
<span>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleModalOpen(person.title, person.imageLarge)
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
<img src={person.imageSmall} />
|
||||
</button>
|
||||
</span>
|
||||
<div className="flex w-full justify-end">
|
||||
<span className="flex flex-col">
|
||||
<h2 className="text-2xl">{person.title}</h2>
|
||||
<p>
|
||||
{person.name}{" "}
|
||||
{person.person2 && (
|
||||
<span>
|
||||
- {person.person2.name} - {person.person2.title}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{person.email && (
|
||||
<div className="flex items-center">
|
||||
<EmailButton
|
||||
email={jenniferCarter.email}
|
||||
label={"Email " + person.name}
|
||||
/>
|
||||
<CopyButton
|
||||
title={"Copy " + person.name + " Email"}
|
||||
text={person.email}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
|
||||
<span>
|
||||
<img src={SteveMiller} />
|
||||
</span>
|
||||
<div className="flex w-full justify-end">
|
||||
<span className="flex flex-col">
|
||||
<h2 className="text-2xl">Worship Leader</h2>
|
||||
<p>Steve Miller</p>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<section className="grid grid-cols-2 gap-3 bg-slate-100 items-center w-full h-fit p-4">
|
||||
<div className="flex w-full justify-start">
|
||||
<span className="flex flex-col">
|
||||
<h2 className="text-2xl">Youth Director</h2>
|
||||
<p>Jennifer Carter - husband - Don </p>
|
||||
<p>
|
||||
<a href="mailto:jennifer@jubileezoo.com">
|
||||
Email: jennifer@jubileezoo.com
|
||||
</a>
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<img src="https://placehold.co/600x400" />
|
||||
</span>
|
||||
</section>
|
||||
<section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
|
||||
<span>
|
||||
<img src="https://placehold.co/600x400" />
|
||||
</span>
|
||||
<div className="flex w-full justify-end">
|
||||
<span className="flex flex-col">
|
||||
<h2 className="text-2xl">Ministry Assistant - Office Secretary</h2>
|
||||
<p>Linda Conner - husband - David</p>
|
||||
<p>
|
||||
<a href="mailto:linda@northshrevebaptist.org">
|
||||
Email: linda@northshrevebaptist.org
|
||||
</a>
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
{modalOpen && (
|
||||
<ImageModal
|
||||
image={activeModalImage}
|
||||
title={activeModalTitle}
|
||||
onClose={() => setModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
<div className="block w-full h-40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import ChurchBG from "../assets/NSBC2.png";
|
|||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div className=" -mt-28">
|
||||
<div className=" -mx-2 -mt-3 relative">
|
||||
<ScrollRestoration />
|
||||
<div className="w-full">
|
||||
|
|
@ -13,36 +14,46 @@ const Home = () => {
|
|||
className="w-full h-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex bg-cover h-full absolute md:object-cover object-center object-contain -top-0 text-gray-50 justify-center items-center">
|
||||
<div className="p-[4px] rounded-xl w-full sm:w-fit md:p-5 inset-0 bg-black/70 dark:bg-slate-900/80">
|
||||
<div className=" md:absolute lg:absolute xl:absolute top-0 w-full h-fit">
|
||||
<div className="w-full h-full flex text-gray-50 justify-center items-center">
|
||||
<div className="p-3 md:my-32 md:rounded-xl lg:rounded-xl lg:my-48 w-full lg:w-fit md:w-fit md:p-5 inset-0 bg-black/70 dark:bg-slate-900/80">
|
||||
<h1 className="w-full flex justify-center text-xl sm:text-2xl md:text-2xl lg:text-4xl">
|
||||
"Welcome to the House of Praise!"
|
||||
</h1>
|
||||
<p className="w-full text-sm sm:text-lg md:text-2xl lg:text-3xl flex justify-center my-3">
|
||||
North Shreve Baptist Church
|
||||
</p>
|
||||
<p className="w-full text-xs sm:text-sm md:text-2xl lg:text-2xl flex justify-center my-3">
|
||||
4930 Old Mooringsport Road Shreveport, LA 71107
|
||||
</p>
|
||||
|
||||
<h1 className="w-full flex justify-center text-xl sm:text-2xl md:text-4xl">
|
||||
"Welcome to the House of Praise!"
|
||||
</h1>
|
||||
<p className="w-full text-sm sm:text-lg md:text-2xl flex justify-center my-3">
|
||||
North Shreve Baptist Church
|
||||
</p>
|
||||
<p className="w-full text-xs sm:text-sm md:text-2xl flex justify-center my-3">
|
||||
4930 Old Mooringsport Road Shreveport, LA 71107
|
||||
</p>
|
||||
|
||||
<div className="w-full text-xs sm:text-sm md:text-xl flex justify-between my-3">
|
||||
<a href="tel:318-425-2350" className="flex items-center"><FaPhone /> (318) 425-2350</a>
|
||||
<a href="mailto:office@northshrevebaptist.org" className="flex items-center"><FaEnvelope /> Email</a>
|
||||
</div>
|
||||
<p className="w-full text-xs sm:text-sm md:text-xl flex justify-center my-3">
|
||||
Rev. Cecil Marr, Pastor
|
||||
</p>
|
||||
<p className=" w-full text-xs sm:text-sm md:text-xl flex justify-center ">
|
||||
Steve Miller, Worship Leader
|
||||
</p>
|
||||
<div className="w-full flex justify-center my-3 pt-2">
|
||||
<button className="flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-2 md:text-lg md:px-10">
|
||||
Watch Past Services <FaPlay />
|
||||
</button>
|
||||
<div className="w-full px-14 md:px-1 text-xs sm:text-sm md:text-xl lg:text-2xl flex justify-between my-3">
|
||||
<a href="tel:318-425-2350" className="flex items-center">
|
||||
<FaPhone /> (318) 425-2350
|
||||
</a>
|
||||
<a
|
||||
href="mailto:office@northshrevebaptist.org"
|
||||
className="flex items-center"
|
||||
>
|
||||
<FaEnvelope /> Email
|
||||
</a>
|
||||
</div>
|
||||
<p className="w-full text-xs sm:text-sm md:text-xl lg:text-2xl flex justify-center my-3">
|
||||
Rev. Cecil Marr, Pastor
|
||||
</p>
|
||||
<p className=" w-full text-xs sm:text-sm md:text-xl lg:text-2xl flex justify-center ">
|
||||
Steve Miller, Worship Leader
|
||||
</p>
|
||||
<div className="w-full flex justify-center my-3 pt-2">
|
||||
<button className="flex text-xs items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-2 md:text-lg md:px-10">
|
||||
Watch Past Services <FaPlay />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div className="p-2 max-w-lg mx-auto">
|
||||
<p className="pt-4 flex justify-between">
|
||||
|
|
@ -54,21 +65,21 @@ const Home = () => {
|
|||
<span>11:00 am.</span>
|
||||
</p>
|
||||
<p className="pb-4 flex justify-between">
|
||||
<span>
|
||||
Wednesday Evening Worship
|
||||
</span>
|
||||
<span>
|
||||
6:30 p.m.
|
||||
|
||||
</span>
|
||||
<span>Wednesday Evening Worship</span>
|
||||
<span>6:30 p.m.</span>
|
||||
</p>
|
||||
<p className="pb-4 flex justify-center">
|
||||
<Link className="px-4 py-2 border border-transparent text-center text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-2 md:text-lg cursor-pointer md:px-10" to="/services">Click here to view the 2023 Worship Schedule for more details</Link>
|
||||
|
||||
<Link
|
||||
className="px-4 py-2 border border-transparent text-center text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-2 md:text-lg cursor-pointer md:px-10"
|
||||
to="/services"
|
||||
>
|
||||
Click here to view the 2023 Worship Schedule for more details
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ const HowToBecomeAChristian = () => {
|
|||
<div className="">
|
||||
<ScrollRestoration />
|
||||
|
||||
<section className="mx-24 flex flex-col gap-6">
|
||||
<section className="mx-4 md:mx-24 flex flex-col md:gap-6">
|
||||
<h1 className="text-3xl my-12 font-bold flex justify-center">
|
||||
How do I become a Christian?
|
||||
</h1>
|
||||
<div className="text-gray-700 my-3 grid grid-cols-2 gap-5">
|
||||
<section className="flex flex-col gap-5">
|
||||
<div className="text-gray-700 my-3 grid grid-cols-1 md:grid-cols-2 md:gap-5">
|
||||
<section className="grid flex-col sm:gap-5">
|
||||
<p>
|
||||
You're not here by accident. God loves you. He wants you to have a
|
||||
personal relationship with Him through Jesus, His Son. There is
|
||||
|
|
@ -43,12 +43,12 @@ const HowToBecomeAChristian = () => {
|
|||
3:23
|
||||
</p>
|
||||
</section>
|
||||
<img src={Gap} alt="" />
|
||||
<img src={Gap} alt="Separated from God" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="mx-24 flex my-7 flex-col gap-6 ">
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
<div>
|
||||
<section className="mx-4 md:mx-24 flex my-7 flex-col md:gap-6 ">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<div className="flex justify-center">
|
||||
<img src={Scales} alt="" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,17 @@ export default {
|
|||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
screens: {
|
||||
'2xs': { min: '300px' },
|
||||
xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
|
||||
sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
|
||||
md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
|
||||
lg: { min: '1200px' }, // Desktop smallest.
|
||||
xl: { min: '1259px' }, // Desktop wide.
|
||||
'2xl': { min: '1359px' } // Desktop widescreen.
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue