move all wizard specific stuff to components/wizard

components/header.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function Header() {
+  return (
+    <>
+      <h1 className="text-3xl">Pfadi Bussle Buchen</h1>
+
+      <p className="mb-8">
+        Du willst das Pfadi Bussle buchen? Hier bist du richtig!
+      </p>
+    </>
+  )
+}

components/wizard/contact.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { WizardContext } from '../context/wizardStore'
+import { WizardContext } from './context/wizardStore'
 import Required from './required'
 
 export default function Contact() {

components/wizard/context/wizardStore.js

@@ -4,7 +4,7 @@ import {
   storeBookingData,
   loadBookingData,
   clearBookingData,
-} from '../helpers/storage'
+} from '../../../helpers/storage'
 
 export const WizardContext = React.createContext()
 

components/wizard/dateSelect.js

@@ -1,14 +1,14 @@
 import React, { useContext, useState, useRef, useEffect } from 'react'
 import useSWR from 'swr'
 
-import { WizardContext } from '../context/wizardStore'
+import { WizardContext } from './context/wizardStore'
 
 import { DateUtils } from 'react-day-picker'
 import DayPickerInput from 'react-day-picker/DayPickerInput'
 
 import Required from './required'
-import { dateFormatBackend } from '../helpers/date'
-import { getNextSmaller, getNextBigger } from '../helpers/array'
+import { dateFormatBackend } from '../../helpers/date'
+import { getNextSmaller, getNextBigger } from '../../helpers/array'
 
 import MomentLocaleUtils, {
   formatDate,

components/wizard/index.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 
 import Link from 'next/link'
 
-import WizardStore, { WizardContext } from '../context/wizardStore'
+import WizardStore, { WizardContext } from './context/wizardStore'
 
 import DateSelect from './dateSelect'
 import Reason from './reason'

components/wizard/reason.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { WizardContext } from '../context/wizardStore'
+import { WizardContext } from './context/wizardStore'
 import Required from './required'
 
 export default function Contact() {

pages/booking/[uuid].js

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react'
 
-import { WizardContext } from '../../context/wizardStore'
 import Footer from '../../components/footer'
 
 // TODO: load booking somehow if we navigate to booking

pages/index.js

@@ -2,8 +2,9 @@ import React from 'react'
 
 import Head from 'next/head'
 
-import Wizard from '../components/wizard'
+import Header from '../components/header'
 import Footer from '../components/footer'
+import Wizard from '../components/wizard/index'
 
 export default function Home() {
   return (
@@ -13,16 +14,10 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <Header />
       <main className="flex-grow">
-        <h1 className="text-3xl">Pfadi Bussle Buchen</h1>
-
-        <p className="mb-8">
-          Du willst das Pfadi Bussle buchen? Hier bist du richtig!
-        </p>
-
         <Wizard />
       </main>
-
       <Footer />
     </div>
   )