prparation for AWs

components/wizard/calendar.tsx

@@ -9,7 +9,7 @@ import { WizardContext } from './context/wizardStore'
 
 const fetcher = (path: string) => fetch(path).then((r) => r.json())
 
-export default function MyCalendar() {
+export default function MyCalendar({ ...props }) {
   const { onChange, state } = useContext(WizardContext)
   const { startDate: start, endDate: end } = state.formData
   const startDate = (start && new Date(start)) || null
@@ -66,15 +66,15 @@ export default function MyCalendar() {
   if (fetchBookedOnError) {
     return (
       <div>
-        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
+        Entschuldigen Sie, aber die Buchungszeiten konnten nicht geladen werden.
         Versuchen Sie es später nochmals.
       </div>
     )
   }
 
   return (
-    <div className="mb-12 p-6 bg-blue-100 rounded">
-      <h2 className="text-xl">Buchungsübersicht</h2>
+    <div {...props}>
+      <h2 className="text-xl">Belegungsplan</h2>
       <Calendar
         minDate={new Date()}
         // @ts-ignore
@@ -107,7 +107,7 @@ export default function MyCalendar() {
         tileClassName={tileClassName}
         value={null}
       />
-      <div className="mt-6 flex justify-center">
+      <div className="mt-3 flex justify-center">
         <div>
           <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>
           <span className="ml-2">Frei</span>

components/wizard/dateSelect.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import InputWrapper from '../inputWrapper'
+import Calendar from './calendar'
 
 export default function DateSelect() {
   const { onChangeEvent, state } = useContext(WizardContext)
@@ -11,6 +12,7 @@ export default function DateSelect() {
   return (
     <>
       <InputWrapper label="Datum" required>
+        <Calendar className="m-6" />
         <div className="inline-block mr-6">
           <label className="flabel inline-block w-6 mr-3" htmlFor="startDate">
             Von

components/wizard/index.tsx

@@ -54,7 +54,6 @@ function WizardInternal() {
 
   return (
     <>
-      <Calendar />
       <form
         className="form"
         onSubmit={(event) => {
@@ -63,7 +62,7 @@ function WizardInternal() {
         }}
       >
         {dataStoredLoaded && (
-          <p className="mb-12">
+          <p className="mb-6">
             Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
             <a className="link" onClick={forgetData} href="">
               Daten wieder vergessen