chaulmark/deafmissoula-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the join mcdi and donate buttons

Browse source
This commit is contained in:
TheMaddax 2024-10-16 19:35:07 -06:00
parent 723a2dd8f8
commit 383f681f3c
5 changed files with 147 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/package.json
View file

@ -13,7 +13,9 @@
"react-router-dom": "^6.17.0",
"react-scripts": "5.0.1",
"styled-components": "^6.1.0",
"typescript": "^5.2.2"
"typescript": "^5.2.2",
"react-modal": "^3.14.4",
"@types/react-modal": "^3.13.1"
},
"scripts": {
"build:css": "postcss src/index.css -o src/tailwind.css",

2
client/src/App.tsx
View file

@ -9,7 +9,7 @@ import Footer from './components/Footer';
import Bylaws from './components/Bylaws';
import Sponsors from './components/Sponsors';
import MeetBoard from './components/Meet-Board';
import ComingSoon from './components/ComingSoon';
/* import ComingSoon from './components/ComingSoon'; */
import JoinMCDi from './components/JoinMCDi';
const App: React.FC = () => {

42
client/src/components/Header.tsx
View file

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import Modal from 'react-modal';
const Header: React.FC = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
@ -114,19 +115,52 @@ const DropdownItem: React.FC<NavItemProps> = ({ href, children }) => (
</Link>
);
const DonateButton: React.FC<{ onClick?: () => void }> = ({ onClick }) => (
const DonateButton: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const handleDonateClick = () => {
setIsModalOpen(true);
if (onClick) onClick();
};
const closeModal = () => {
setIsModalOpen(false);
};
return (
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<button
zeffy-form-link="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb?modal=true"
onClick={onClick}
onClick={handleDonateClick}
className="inline-block bg-yellow-400 text-[#8C1D40] font-bold py-2 px-4 rounded-full hover:bg-yellow-300 transition-colors duration-200 shadow-md"
>
Donate
</button>
<Modal
isOpen={isModalOpen}
onRequestClose={closeModal}
contentLabel="Donate to MCDi"
className="modal"
overlayClassName="overlay"
>
<h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2>
<iframe
src="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb"
width="100%"
height="600px"
frameBorder="0"
></iframe>
<button
onClick={closeModal}
className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
>
Close
</button>
</Modal>
</motion.div>
);
);
};
export default Header;

65
client/src/components/JoinMCDi.tsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Modal from 'react-modal';
interface CardProps {
title: string;
@ -18,14 +19,14 @@ const Card: React.FC<CardProps> = ({ title, content, className }) => (
</motion.div>
);
const JoinButton: React.FC = () => (
const JoinButton: React.FC<{ onClick: () => void }> = ({ onClick }) => (
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="text-center"
>
<button
zeffy-form-link="https://www.zeffy.com/embed/ticketing/ec0af9d1-4f07-4156-a6cc-0fa0878b512b?modal=true"
onClick={onClick}
className="inline-block bg-yellow-400 text-[#8C1D40] font-bold py-2 px-4 rounded-full hover:bg-yellow-300 transition-colors duration-200 shadow-md"
>
Join MCDi
@ -34,6 +35,25 @@ const JoinButton: React.FC = () => (
);
const JoinMCDi: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
Modal.setAppElement('#root');
}, []);
const handleJoinClick = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
setIsModalOpen(true);
}, 500);
};
const closeModal = () => {
setIsModalOpen(false);
};
const cards = [
{
title: "People Who Are Deaf",
@ -109,9 +129,8 @@ const JoinMCDi: React.FC = () => {
<li>No voting rights</li>
</ul>
</div>
</div>
<JoinButton />
<JoinButton onClick={handleJoinClick} />
</div>
<div className="mb-8">
@ -137,8 +156,42 @@ const JoinMCDi: React.FC = () => {
</p>
</div>
<JoinButton />
<JoinButton onClick={handleJoinClick} />
<Modal
isOpen={isModalOpen}
onRequestClose={closeModal}
contentLabel="Join MCDi Membership Form"
className="modal"
overlayClassName="overlay"
style={{content: {overflow: 'hidden'}}}
>
<div className="h-full flex flex-col">
<h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Join MCDi Membership Form</h2>
<div className="flex-grow overflow-y-auto">
<iframe
src="https://www.zeffy.com/embed/ticketing/ec0af9d1-4f07-4156-a6cc-0fa0878b512b"
width="100%"
height="100%"
frameBorder="0"
></iframe>
</div>
<button
onClick={closeModal}
className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
>
Close
</button>
</div>
</Modal>
</motion.div>
{isLoading && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-[#8C1D40]"></div>
</div>
)}
</div>
);
};

23
client/src/index.css
View file

@ -107,3 +107,26 @@ html {
.animate-fadeIn {
animation: fadeIn 0.5s ease-in-out;
}
/* Modal styles */
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 8px;
width: 60vw;
height: 60vh;
overflow-y: hidden;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}