extract layout and apply to all pages

components/layout.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Footer from '../components/footer'
+import Header from '../components/header'
+
+export default function Home({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <main className="main">{children}</main>
+      <Footer />
+    </>
+  )
+}

pages/book.tsx

@@ -1,16 +1,11 @@
-import React from 'react'
-import Footer from '../components/footer'
-import Header from '../components/header'
+import Layout from '../components/layout'
 import Wizard from '../components/wizard/index'
 
 export default function Home() {
   return (
-    <>
-      <Header />
-      <main className="main">
+    <Layout>
+      <h1 className="mb-3 text-xl font-extrabold">Buchungsanfrage</h1>
       <Wizard />
-      </main>
-      <Footer />
-    </>
+    </Layout>
   )
 }

pages/impressum.tsx

@@ -1,11 +1,8 @@
-import React from 'react'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Impressum() {
   return (
-    <>
-      <Header />
-      <main className="main">
+    <Layout>
       <h1 className="mb-3 text-xl font-extrabold">Impressum</h1>
 
       <address className="mb-3">
@@ -49,7 +46,6 @@ export default function Impressum() {
           https://pfadi-bussle.tomru.space
         </a>
       </p>
-      </main>
-    </>
+    </Layout>
   )
 }

pages/index.tsx

@@ -1,13 +1,9 @@
-import React from 'react'
 import Link from 'next/link'
-import Footer from '../components/footer'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Home() {
   return (
-    <>
-      <Header />
-      <main className="main">
+    <Layout>
       <div className="mt-6 sm:text-center">
         <h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
           <span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
@@ -16,8 +12,8 @@ export default function Home() {
           </span>
         </h1>
         <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
-            Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man
-            unser Pfadi-Bussle mieten.
+          Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man unser
+          Pfadi-Bussle mieten.
         </p>
         <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
           <div className="rounded-md shadow">
@@ -54,8 +50,6 @@ export default function Home() {
           </a>
         </p>
       </div>
-      </main>
-      <Footer />
-    </>
+    </Layout>
   )
 }

pages/prices.tsx

@@ -1,10 +1,8 @@
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Prices() {
   return (
-    <>
-      <Header />
-      <main className="main text-gray-900">
+    <Layout>
       <h1 className="mb-3 text-xl font-extrabold">Preise</h1>
       <table className="divide-y divide-gray-200">
         <thead className="bg-gray-50">
@@ -52,7 +50,6 @@ export default function Prices() {
           </tr>
         </tbody>
       </table>
-      </main>
-    </>
+    </Layout>
   )
 }

pages/privacy.tsx

@@ -1,18 +1,16 @@
 import React from 'react'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Privacy() {
   return (
-    <>
-      <Header />
-      <main className="main text-gray-900">
+    <Layout>
       <h1 className="mb-3 text-xl font-extrabold">Datenschutzerklärung</h1>
       <h2 className="mb-2 text-lg font-extrabold">Geltungsbereich</h2>
       <p className="mb-2">
         Diese Datenschutzerklärung soll die Nutzer dieser Website gemäß
         Bundesdatenschutzgesetz und Telemediengesetz über die Art, den Umfang
-          und den Zweck der Erhebung und Verwendung personenbezogener Daten
-          durch den Websitebetreiber{' '}
+        und den Zweck der Erhebung und Verwendung personenbezogener Daten durch
+        den Websitebetreiber{' '}
         <a className="link" href="mailto:pfadibussle@tomru.space">
           Thomas Ruoff
         </a>{' '}
@@ -28,9 +26,9 @@ export default function Privacy() {
       </p>
       <h2 className="mb-2 text-lg font-extrabold">Zugriffsdaten</h2>
       <p className="mb-2">
-          Der Websitebetreiber bzw. Seitenprovider erhebt Daten über Zugriffe
-          auf die Seite und speichert diese als „Server-Logfiles“ ab. Folgende
-          Daten werden so protokolliert:{' '}
+        Der Websitebetreiber bzw. Seitenprovider erhebt Daten über Zugriffe auf
+        die Seite und speichert diese als „Server-Logfiles“ ab. Folgende Daten
+        werden so protokolliert:{' '}
       </p>
       <ul className="mb-2 list-disc list-inside">
         <li>Besuchte URL</li>
@@ -43,11 +41,10 @@ export default function Privacy() {
       </ul>
 
       <p className="mb-2">
-          Die erhobenen Daten dienen lediglich statistischen Auswertungen und
-          zur Verbesserung der Website. Der Websitebetreiber behält sich
-          allerdings vor, die Server-Logfiles nachträglich zu überprüfen,
-          sollten konkrete Anhaltspunkte auf eine rechtswidrige Nutzung
-          hinweisen.
+        Die erhobenen Daten dienen lediglich statistischen Auswertungen und zur
+        Verbesserung der Website. Der Websitebetreiber behält sich allerdings
+        vor, die Server-Logfiles nachträglich zu überprüfen, sollten konkrete
+        Anhaltspunkte auf eine rechtswidrige Nutzung hinweisen.
       </p>
 
       <h2 className="mb-2 text-lg font-extrabold">Cookies</h2>
@@ -64,25 +61,25 @@ export default function Privacy() {
         Wenn sie eine Buchungsanfrage tätigen, wird Ihnen angeboten, die
         Buchunsanfragedaten für die nächste Buchung zu merken um weitere
         Anfragen zu beschleunigen. Die Speicherung der Buchungsdaten erfolgt
-          dabei nicht auf unserem Server sondern nur in Ihrem Browser, genauer
-          auf Ihrem Endgerät im s.g. LocalStorage. Diese Daten sind also nicht
-          in unserem Besitzt noch habe wir Zugriff darauf. Erste wenn eine
-          weitere Buchunsanfrage, mit den bei Ihnen gespeicherten Daten
-          vorausgefüllt und abgeschickt wird, erhalten wir Zugriff drauf. Es
-          besteht somit keinen Unterschied, ob sie die Daten manuell oder mit
-          dieser Funktion vorausfüllen lassen. Die für diese Funktion in Ihrem
-          Browser gespeicherten Daten umfassen ausschließlich Daten welche sie
-          vorher zum Zwecke einer Buchungsanfrage eingegeben haben. Ob sie
-          aktuell Buchungsdaten gespeichert haben, wir Ihnen als Info-Nachricht
-          in der Buchungsanfragemaske angezeigt. Alle gespeicherten Felder
-          werden in diesem Fall auch gleich im Formular transparent
-          vorausgefüllt. Falls Sie diese Daten löschen möchten, können Sie dies
-          über einen Link in der Info-Nachricht bewerkstelligen.
+        dabei nicht auf unserem Server sondern nur in Ihrem Browser, genauer auf
+        Ihrem Endgerät im s.g. LocalStorage. Diese Daten sind also nicht in
+        unserem Besitzt noch habe wir Zugriff darauf. Erste wenn eine weitere
+        Buchunsanfrage, mit den bei Ihnen gespeicherten Daten vorausgefüllt und
+        abgeschickt wird, erhalten wir Zugriff drauf. Es besteht somit keinen
+        Unterschied, ob sie die Daten manuell oder mit dieser Funktion
+        vorausfüllen lassen. Die für diese Funktion in Ihrem Browser
+        gespeicherten Daten umfassen ausschließlich Daten welche sie vorher zum
+        Zwecke einer Buchungsanfrage eingegeben haben. Ob sie aktuell
+        Buchungsdaten gespeichert haben, wir Ihnen als Info-Nachricht in der
+        Buchungsanfragemaske angezeigt. Alle gespeicherten Felder werden in
+        diesem Fall auch gleich im Formular transparent vorausgefüllt. Falls Sie
+        diese Daten löschen möchten, können Sie dies über einen Link in der
+        Info-Nachricht bewerkstelligen.
       </p>
       <h2 className="mb-2 text-lg font-extrabold">Buchungsanfrage</h2>
       <p className="mb-2">
-          Sämtliche Daten, welche im Rahmen einer Bestellabwicklung von den
-          Kunden eingegeben werden, werden gespeichert. Dazu gehören:
+        Sämtliche Daten, welche im Rahmen einer Bestellabwicklung von den Kunden
+        eingegeben werden, werden gespeichert. Dazu gehören:
       </p>
       <ul className="mb-2 list-disc list-inside">
         <li>Start- und Enddatum der Anfrage</li>
@@ -96,10 +93,9 @@ export default function Privacy() {
       <p className="mb-2">
         Jene Daten, welche zur Auftragsabwicklung zwingend notwendig sind,
         werden an dritte Dienstleister weitergegeben. Sowie die Aufbewahrung
-          Ihrer Daten nicht mehr erforderlich oder gesetzlich geboten ist,
-          werden diese gelöscht.
+        Ihrer Daten nicht mehr erforderlich oder gesetzlich geboten ist, werden
+        diese gelöscht.
       </p>
-      </main>
-    </>
+    </Layout>
   )
 }

pages/terms.tsx

@@ -1,17 +1,12 @@
-import React from 'react'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Terms() {
   return (
-    <>
-      <Header />
-      <main className="main text-gray-900 mt-6">
+    <Layout>
       <h1 className="mb-3 text-xl font-extrabold">
         Allgemeine Geschäftsbedinungen
       </h1>
-        <h2 className="mb-2 text-lg font-extrabold">
-          Grundlegende Bedingungen
-        </h2>
+      <h2 className="mb-2 text-lg font-extrabold">Grundlegende Bedingungen</h2>
       <p>
         Die nachstenden Bedingungen gelten für Verträge zwischen Freundeskreis
         des VCP Rosenfeld e.V.- nachfolgend Anbieter genannt - und Kunden,
@@ -28,7 +23,6 @@ export default function Terms() {
       <p className="mb-2">TODO</p>
       <h2 className="mb-2 text-lg font-extrabold">Vertragsdauer</h2>
       <p className="mb-2">TODO</p>
-      </main>
-    </>
+    </Layout>
   )
 }

styles/index.css

@@ -18,7 +18,7 @@
 }
 
 .form {
-  @apply w-full mt-6 p-6;
+  @apply w-full;
 }
 
 .fsw {