diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..fa51da2
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 2,
+ "semi": false,
+ "singleQuote": true
+}
diff --git a/components/contact.js b/components/contact.js
new file mode 100644
index 0000000..823d8e6
--- /dev/null
+++ b/components/contact.js
@@ -0,0 +1,34 @@
+export default function Contact({}) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/dateSelect.js b/components/dateSelect.js
new file mode 100644
index 0000000..1aa6caf
--- /dev/null
+++ b/components/dateSelect.js
@@ -0,0 +1,80 @@
+import moment from 'moment'
+
+import 'react-dates/initialize'
+import { DateRangePicker, SingleDatePicker } from 'react-dates'
+
+import TimeSelect from './timeSelect'
+
+export default function DateSelect({
+ multipleDays,
+ startDate,
+ setStartDate,
+ endDate,
+ setEndDate,
+ focusedInput,
+ setFocusedInput,
+ pickupTime,
+ setPickupTime,
+ dropoffTime,
+ setDropoffTime,
+}) {
+ const timeSelect = (
+ <>
+
+
+
+ )
+ if (multipleDays === false) {
+ return (
+ <>
+
+ setStartDate(date)}
+ focused={typeof focusedInput === 'boolean' && focusedInput}
+ onFocusChange={({ focused }) => setFocusedInput(focused)}
+ id="your_unique_id"
+ />
+
+ {timeSelect}
+
+ )
+ }
+
+ if (multipleDays === true) {
+ return (
+ <>
+
+ {
+ setStartDate(startDate)
+ setEndDate(endDate)
+ }}
+ focusedInput={focusedInput}
+ onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
+ minDate={moment()}
+ />
+
+ {timeSelect}
+
+ )
+ }
+
+ return null
+}
diff --git a/components/rangeSelect.js b/components/rangeSelect.js
new file mode 100644
index 0000000..83af2cc
--- /dev/null
+++ b/components/rangeSelect.js
@@ -0,0 +1,23 @@
+export default function RangeSelect({ multipleDays, setMultipleDays }) {
+ return (
+
+ Ich will das Bussle für
+ setMultipleDays(false)}
+ />
+
+ setMultipleDays(true)}
+ />
+ mieten
+
+ )
+}
diff --git a/components/timeSelect.js b/components/timeSelect.js
new file mode 100644
index 0000000..70070bb
--- /dev/null
+++ b/components/timeSelect.js
@@ -0,0 +1,26 @@
+export default function TimeSelect({ id, name, label, value = '', setValue }) {
+ return (
+
+
+
+
+ )
+}
diff --git a/pages/_app.js b/pages/_app.js
index 558d4d1..653a451 100644
--- a/pages/_app.js
+++ b/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
+ return
}
diff --git a/pages/index.js b/pages/index.js
index cc70017..59017fc 100644
--- a/pages/index.js
+++ b/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 (
@@ -18,8 +29,29 @@ export default function Home() {
Du willst das Pfadi Bussle buchen? Hier bist du richtig!
-
-
+