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

update donate button for mobile

Browse source
This commit is contained in:
TheMaddax 2024-10-16 20:33:32 -06:00
parent 7cc2f63448
commit 398aa130a0
1 changed files with 53 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,18 @@ import Modal from 'react-modal';
const Header: React.FC = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isDonateModalOpen, setIsDonateModalOpen] = useState(false);
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
const handleDonateClick = (e: React.MouseEvent) => {
e.stopPropagation();
setIsDonateModalOpen(true);
};
const closeDonateModal = () => {
setIsDonateModalOpen(false);
};
return (
<header className="bg-[#8C1D40] text-white shadow-md">
@ -20,12 +32,12 @@ const Header: React.FC = () => {
<li><AboutDropdown /></li>
<li><NavItem href="/calendar">Calendar</NavItem></li>
<li><NavItem href="/joinmcdi">Join MCDi</NavItem></li>
<li><DonateButton /></li>
<li><DonateButton onClick={handleDonateClick} /></li>
</ul>
</nav>
<button
className="md:hidden text-white"
onClick={() => setIsMenuOpen(!isMenuOpen)}
onClick={toggleMenu}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
@ -46,11 +58,36 @@ const Header: React.FC = () => {
<li><NavItem href="/about" onClick={() => setIsMenuOpen(false)}>About MCDi</NavItem></li>
<li><NavItem href="/calendar" onClick={() => setIsMenuOpen(false)}>Calendar</NavItem></li>
<li><NavItem href="/joinmcdi" onClick={() => setIsMenuOpen(false)}>Join MCDi</NavItem></li>
<li><DonateButton onClick={() => setIsMenuOpen(false)} /></li>
<li><DonateButton onClick={handleDonateClick} /></li>
</ul>
</motion.div>
)}
</AnimatePresence>
<Modal
isOpen={isDonateModalOpen}
onRequestClose={closeDonateModal}
contentLabel="Donate to MCDi"
className="modal"
overlayClassName="overlay"
>
<div className="h-full flex flex-col">
<h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2>
<div className="flex-grow overflow-y-auto">
<iframe
src="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb"
width="100%"
height="100%"
frameBorder="0"
></iframe>
</div>
<button
onClick={closeDonateModal}
className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
>
Close
</button>
</div>
</Modal>
</header>
);
};
@ -115,56 +152,18 @@ const DropdownItem: React.FC<NavItemProps> = ({ href, children }) => (
</Link>
);
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 }}
const DonateButton: React.FC<{ onClick: (e: React.MouseEvent) => void }> = ({ onClick }) => (
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<button
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"
>
<button
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"
>
<div className="h-full flex flex-col">
<h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2>
<div className="flex-grow overflow-y-auto">
<iframe
src="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb"
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>
);
};
Donate
</button>
</motion.div>
);
export default Header;
export default Header;