tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

kick off with simple form

Browse Source
This commit is contained in:
Thomas Ruoff
2020-06-27 01:09:53 +02:00
parent 8d9f613a52
commit 2abaefa25d
2 changed files with 39 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/_app.js Normal file
View File

@@ -0,0 +1,5 @@
import 'react-dates/lib/css/_datepicker.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

72
pages/index.js
View File

@@ -1,62 +1,56 @@
import Head from 'next/head'
import { useState } from 'react'
import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker } from 'react-dates'
export default function Home() {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [focusedInput, setFocusedInput ] = useState(null);
return (
<div className="container">
<Head>
<title>Create Next App</title>
<title>Pfadi Bussle Buchen</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className="title">
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<h1 className="title">Pfadi Bussle Buchen</h1>
<p className="description">
Get started by editing <code>pages/index.js</code>
Du willst das Pfadi Bussle buchen? Hier bist du richtig!
</p>
<div className="grid">
<a href="https://nextjs.org/docs" className="card">
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<section>
<form>
<label>Ich will das Bussle für</label>
<input type="radio" id="single" name="days" value="singleDay"/>
<label for="single">einen Tag</label>
<input type="radio" id="multiple" name="days" value="multipleDays"/>
<label for="multiple">mehrere Tage</label>
<a href="https://nextjs.org/learn" className="card">
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<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()}
/>
</form>
</section>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className="card"
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className="card"
>
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
</a>
<a>Freundeskreis des VCP Rosenfeld</a>
</footer>
<style jsx>{`