devconnect banner

efdevcon · Sep 29, 2024 · 37a3ad2 · 37a3ad2
1 parent baa699d
commit 37a3ad2
Showing 1 changed file with 32 additions and 1 deletion.
diff --git a/devconnect/src/pages/_app.tsx b/devconnect/src/pages/_app.tsx
@@ -1,14 +1,17 @@
-import React from 'react'
+import React, { useState } from 'react'
 import 'styles/globals.scss'
 import type { AppProps } from 'next/app'
 import { Roboto, Roboto_Condensed } from 'next/font/google'
+import { motion, AnimatePresence } from 'framer-motion'
 export const roboto = Roboto({ subsets: ['latin'], variable: '--font-roboto', weight: ['400', '700'], display: 'swap' })
 export const robotoCondensed = Roboto_Condensed({
   subsets: ['latin'],
   variable: '--font-roboto-condensed',
   weight: ['400', '700'],
 })
 import { init } from '@socialgouv/matomo-next'
+import { Button } from 'lib/components/button'
+import Link from 'common/components/link'
 
 const MATOMO_URL = 'https://ethereumfoundation.matomo.cloud'
 const MATOMO_SITE_ID = '29'
@@ -28,6 +31,8 @@ if (typeof window !== 'undefined') {
 }
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const [showBanner, setShowBanner] = useState(true)
+
   React.useEffect(() => {
     if (!matomoAdded && process.env.NODE_ENV === 'production') {
       init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID })
@@ -43,6 +48,32 @@ function MyApp({ Component, pageProps }: AppProps) {
           --font-roboto-condensed: ${robotoCondensed.style.fontFamily};
         }
       `}</style>
+
+      <AnimatePresence>
+        {showBanner && (
+          <motion.div
+            initial={{ y: -100 }}
+            animate={{ y: 0 }}
+            exit={{ y: -100 }}
+            transition={{ duration: 1 }}
+            className="fixed top-4 pointer-events-none flex left-0 right-0 justify-center items-center text-black text-center z-50 rounded-md mx-4"
+          >
+            <div className="flex flex-wrap justify-center gap-2 items-center bg-white shadow-md pointer-events-auto p-2.5 rounded-md">
+              <p>
+                Devcon is happening on November 12-15! Learn more on{' '}
+                <Link href="https://devcon.org" className="underline">
+                  devcon.org
+                </Link>
+                .
+              </p>
+              <Button className="" color="black-1" fill onClick={() => setShowBanner(false)}>
+                Dismiss
+              </Button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       <Component {...pageProps} />
     </>
   )