add appStore and use router for booking

pages/_app.js

@@ -4,6 +4,12 @@ import '../styles/index.css'
 
 import 'react-day-picker/lib/style.css'
 
+import AppStore from '../context/appStore'
+
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <AppStore>
+      <Component {...pageProps} />
+    </AppStore>
+  )
 }

pages/booking/[id].js

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react'
+import { AppContext } from '../../context/appStore'
+import Footer from '../../components/footer'
+
+export default function Booking() {
+  const { dataStored, dataStoredLoaded } = state
+
+  return (
+    <div className="mx-3 flex flex-col min-h-screen">
+      <main className="flex-grow">
+        <h1 className="text-3xl">Pfadi Bussle Buchung</h1>
+
+        <h3>Danke, die Buchung ist in Bearbeitung!</h3>
+        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
+        {!dataStoredLoaded && typeof dataStored !== 'boolean' && (
+          <>
+            <p>
+              Sollen die eingegebenen Daten in <strong>Deinem Browser</strong>{' '}
+              für die nächste Buchung gespeichert werden?
+            </p>
+            <button onClick={() => storeData(true)} className="btn btn-blue">
+              Ja, bitte speichern
+            </button>
+            <button
+              onClick={() => storeData(false)}
+              className="btn btn-grey ml-2"
+            >
+              Nein danke
+            </button>
+          </>
+        )}
+        {dataStored === true && (
+          <p>Ok, die Daten wurden für die nächste Buchung gespeichert.</p>
+        )}
+      </main>
+
+      <Footer />
+    </div>
+  )
+}