more funky commits

pages/_app.js

@@ -1,9 +1,8 @@
 import 'react-dates/lib/css/_datepicker.css'
 
 import moment from 'moment'
-import deLocale from 'moment/locale/de';
-
+import deLocale from 'moment/locale/de'
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+    return <Component {...pageProps} />
 }

pages/index.js

@@ -1,8 +1,19 @@
+import { useState } from 'react'
 import Head from 'next/head'
 
-import Step1 from './step1';
+import RangeSelect from '../components/rangeSelect'
+import DateSelect from '../components/dateSelect'
+import Contact from '../components/contact'
 
 export default function Home() {
+  const [multipleDays, setMultipleDays] = useState(null)
+
+  const [startDate, setStartDate] = useState(null)
+  const [endDate, setEndDate] = useState(null)
+  const [focusedInput, setFocusedInput] = useState(null)
+
+  const [pickupTime, setPickupTime] = useState('')
+  const [dropoffTime, setDropoffTime] = useState('')
 
   return (
     <div className="container">
@@ -18,8 +29,29 @@ export default function Home() {
           Du willst das Pfadi Bussle buchen? Hier bist du richtig!
         </p>
 
-        <Step1/>
-        
+        <form className="bookingForm">
+          <RangeSelect
+            multipleDay={multipleDays}
+            setMultipleDays={setMultipleDays}
+          />
+          <DateSelect
+            multipleDays={multipleDays}
+            startDate={startDate}
+            setStartDate={setStartDate}
+            endDate={endDate}
+            setEndDate={setEndDate}
+            focusedInput={focusedInput}
+            setFocusedInput={setFocusedInput}
+            pickupTime={pickupTime}
+            setPickupTime={setPickupTime}
+            dropoffTime={dropoffTime}
+            setDropoffTime={setDropoffTime}
+          />
+
+          <Contact />
+
+          <input type="submit" />
+        </form>
       </main>
 
       <footer>
@@ -96,57 +128,8 @@ export default function Home() {
           font-size: 1.5rem;
         }
 
-        code {
-          background: #fafafa;
-          border-radius: 5px;
-          padding: 0.75rem;
-          font-size: 1.1rem;
-          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-        }
-
-        .grid {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-wrap: wrap;
-
-          max-width: 800px;
-          margin-top: 3rem;
-        }
-
-        .card {
-          margin: 1rem;
-          flex-basis: 45%;
-          padding: 1.5rem;
-          text-align: left;
-          color: inherit;
-          text-decoration: none;
-          border: 1px solid #eaeaea;
-          border-radius: 10px;
-          transition: color 0.15s ease, border-color 0.15s ease;
-        }
-
-        .card:hover,
-        .card:focus,
-        .card:active {
-          color: #0070f3;
-          border-color: #0070f3;
-        }
-
-        .card h3 {
-          margin: 0 0 1rem 0;
-          font-size: 1.5rem;
-        }
-
-        .card p {
-          margin: 0;
-          font-size: 1.25rem;
-          line-height: 1.5;
-        }
-
-        .logo {
-          height: 1em;
+        .bookingForm {
+          width: 80%;
         }
 
         @media (max-width: 600px) {

pages/step1.js

@@ -1,62 +0,0 @@
-import { useState } from 'react'
-
-import moment from 'moment'
-
-import 'react-dates/initialize'
-import { DateRangePicker, SingleDatePicker } from 'react-dates'
-
-export default function Home() {
-
-  const [multipleDays, setMultipleDays] = useState(null);
-
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
-  const [focusedInput, setFocusedInput ] = useState(null);
-
-  return (
-    <form>
-      <div>
-        Ich will das Bussle für
-        <div>
-            <input type="radio" id="single" name="days" value="singleDay" onChange={() => setMultipleDays(false)} />
-            <label for="single">einen Tag</label> 
-        </div>
-        <div>
-          <input type="radio" id="multiple" name="days" value="multipleDays" onChange={() => setMultipleDays(true)}/>
-          <label for="multiple">mehrere Tage</label>
-        </div>
-        {' '}mieten
-      </div>
-
-      { multipleDays === false && (
-        <div>
-          <SingleDatePicker
-            date={startDate}
-            onDateChange={date => setStartDate(date)}
-            focused={typeof focusedInput === 'boolean' && focusedInput}
-            onFocusChange={({ focused }) => setFocusedInput(focused)}
-            id="your_unique_id"
-          />
-        </div>
-      ) }
-
-      { multipleDays === true && (
-        <div>
-          <DateRangePicker
-            startDate={startDate}
-            startDateId="bussle_start_date_id"
-            endDate={endDate}
-            endDateId="bussle_end_date_id"
-            onDatesChange={({ startDate, endDate }) => {
-              setStartDate(startDate)
-              setEndDate(endDate)
-            }}
-            focusedInput={focusedInput}
-            onFocusChange={focusedInput => setFocusedInput(focusedInput)}
-            minDate={moment()}
-          /> 
-        </div>
-      )}
-    </form>
-  )
-}