Merge pull request #92 from berlin/staging

Feat : info banner for meetup
berlin · Oct 26, 2022 · d166a2b · d166a2b · vercel · Oct 26, 2022
2 parents d5af79d + 2f75a89
commit d166a2b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { mapRawQueryToState } from '@lib/utils/queryUtil'
 import { ParsedUrlQuery } from 'querystring'
 import { StrictMode, FC } from 'react'
+import { Banner } from '@components/Banner'
 import { Head } from '@components/Head'
 import '../src/style/global.css'
 import { useMatomo } from '@lib/hooks/useMatomo'
@@ -30,6 +31,7 @@ const App: FC<{
 
   return (
     <StrictMode>
+      {pathname !== '/share' && <Banner />}
       <Head pageTitle={pageProps.title || ''} />
       {pathname !== '/share' && <Header {...pageProps.query} />}
       <Component {...pageProps} query={parsedQuery} />

diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -0,0 +1,35 @@
+import { FC, useState } from 'react'
+import { Button } from '@components/Button'
+import { Cross } from '@components/Icons'
+
+export const Banner: FC = () => {
+  const [showBanner, setShowBanner] = useState(true)
+
+  return showBanner ? (
+    <div className="bg-blue text-white">
+      <button
+        onClick={() => setShowBanner(false)}
+        className="p-2 font-medium text-brand cursor-pointer absolute right-0"
+      >
+        <Cross color1={'white'} />
+      </button>
+      <div className="px-4 sm:px-0 container m-auto py-6 flex gap-4 items-end flex-wrap sm:flex-nowrap">
+        <p className="grow">
+          <b>Liebe Developer, </b>
+          am 23.11.22 um 19 Uhr findet im CityLAB Berlin das nächste Developer
+          Meetup statt.
+          <br />
+          Du bist herzlich willkommen, uns über die Schulter zu schauen und
+          selbst aktiv mitzumachen. Wir freuen uns auf euch!
+        </p>
+        <span className="shrink-0 self-center">
+          <Button
+            href={'https://citylab-berlin.org/de/events/developer-meetup-3/'}
+          >
+            Mehr Erfahren
+          </Button>
+        </span>
+      </div>
+    </div>
+  ) : null
+}
diff --git a/src/style/colors.js b/src/style/colors.js
@@ -29,6 +29,7 @@ const colors = Object.assign(
       '900': '#111827',
     },
     brand: '#c41b31',
+    blue: '#324FA3',
   },
   palette
 )
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ const colors = Object.assign( @@
           '900': '#111827',
         },
         brand: '#c41b31',
+        blue: '#324FA3',
       },
       palette
     )
@@ Expand Down @@