diff --git a/pages/pizza.js b/pages/pizza.js index 45d4a7c2..d55518bc 100644 --- a/pages/pizza.js +++ b/pages/pizza.js @@ -15,9 +15,23 @@ import { import Nav from '../components/nav' import Tilt from '../components/tilt' import Ticker from 'react-ticker' - import { useState } from 'react' + import { useState, useEffect } from 'react' const PizzaPage = () => { + const [isModalOpen, setIsModalOpen] = useState(false) + useEffect(() => { + setIsModalOpen(true) + }, []) + + useEffect(() => { + if (isModalOpen) { + document.body.style.overflow = 'hidden' + } + else { + document.body.style.overflow = 'auto' + } + }, [isModalOpen]) + const getColor = idx => { const colors = ['#EEA820', '#FF8C37', '#EC3750'] return colors[idx % colors.length] @@ -108,6 +122,66 @@ import { description="GitHub is providing pizza grants to 500 Hack Clubs around the world. Wondering How To Start A Coding Club? Hack Club is the answer." image="https://cloud-p6r4eeji5-hack-club-bot.vercel.app/00club-min__1___1___1_.png" /> + + {isModalOpen && ( + setIsModalOpen(false)} + sx={{ + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + bg: 'rgba(0, 0, 0, 0.5)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + zIndex: 9999 + }} + > + e.stopPropagation()} + sx={{ + bg: 'white', + borderRadius: '16px', + p: 4, + maxWidth: '600px', + width: '90%', + maxHeight: '80vh', + overflowY: 'auto', + position: 'relative' + }} + > + + + The pizza grant is ending! (for now) + + Hey there! The pizza grant has ended, but we're working on a system to bring it back soon. For now, we've temporarily disabled submissions. Keep an eye on your Leaders newsletter for updates! + + + + )}