more funky commits

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) {