move Layout into _app.tsx

pages/_app.tsx

@@ -1,7 +1,11 @@
 export { reportWebVitals } from 'next-axiom'
 import { useEffect } from 'react'
 
+import type { AppProps } from 'next/app'
+
 import { useSession, signIn, SessionProvider } from 'next-auth/react'
+import Layout from '../components/layout';
+
 import '../styles/index.css'
 
 function Auth({ children }) {
@@ -29,6 +33,7 @@ export default function MyApp({
   return (
     <div className="flex flex-col min-h-screen">
       <SessionProvider session={session}>
+        <Layout>
           {Component.authenticationRequired ? (
             <Auth>
               <Component {...pageProps} />
@@ -36,6 +41,7 @@ export default function MyApp({
           ) : (
             <Component {...pageProps} />
           )}
+        </Layout>
       </SessionProvider>
     </div>
   )

pages/admin/bookings/[uuid]/bill.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import Layout from '../../../../components/layout'
 import Input from '../../../../components/input'
 import Select from '../../../../components/select'
 import { Booking } from '../../../../db/booking'
@@ -134,7 +133,7 @@ function BookingBillPage({
   }
 
   return (
-    <Layout>
+    <>
       {booking && (
         <form className="w-full" onSubmit={onSubmit}>
           <div>
@@ -198,8 +197,7 @@ function BookingBillPage({
                     >
                       -
                     </button>
-                    <label className="flabel inline">{`Kostenpunkt ${
-                      index + 1
+                    <label className="flabel inline">{`Kostenpunkt ${index + 1
                       }`}</label>
                   </div>
                   <div className="ml-10 mb-3" key={`input{index}`}>
@@ -258,7 +256,7 @@ function BookingBillPage({
           </button>
         </form>
       )}
-    </Layout>
+    </>
   )
 }
 

pages/admin/bookings/[uuid]/index.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import Layout from '../../../../components/layout'
 import Calendar from '../../../../components/calendar'
 import { getServerSideBooking } from '../../../../lib/getServerSideProps'
 import { Booking } from '../../../../db/booking'
@@ -37,7 +36,7 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
   }
 
   return (
-    <Layout>
+    <>
       <h2 className="text-3xl">Buchung {booking.uuid}</h2>
       <Calendar start={booking.startDate} end={booking.endDate} />
       <div>
@@ -71,7 +70,7 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
           <a className="btn btn-gray">Rechnung</a>
         </Link>
       </div>
-    </Layout>
+    </>
   )
 }
 

pages/admin/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import BookingTable from '../../components/bookingTable'
-import Layout from '../../components/layout'
 
 import { getServerSideRecentBookings } from '../../lib/getServerSideProps'
 
@@ -9,20 +8,18 @@ export const getServerSideProps = getServerSideRecentBookings
 function AdminRecentBookings({ bookings }) {
   if (!bookings || !bookings.length) {
     return (
-      <Layout>
       <h3 className="text-lg leading-6 font-medium text-gray-900">
         No recent bookings 😿
       </h3>
-      </Layout>
     )
   }
 
   return (
-    <Layout>
+    <>
       {bookings.map((booking: any) => (
         <BookingTable key={booking.uuid} booking={booking} />
       ))}
-    </Layout>
+    </>
   )
 }
 

pages/book.tsx

@@ -1,11 +1,10 @@
-import Layout from '../components/layout'
 import Book from '../components/book'
 
 export default function Home() {
   return (
-    <Layout>
+    <>
       <h1 className="mb-3 text-xl font-extrabold">Buchungsanfrage</h1>
       <Book />
-    </Layout>
+    </>
   )
 }

pages/bookings/[uuid]/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import Layout from '../../../components/layout'
 import { getServerSideBooking } from '../../../lib/getServerSideProps'
 import { Booking } from '../../../db/booking'
 import { BOOKING_STATUS } from '../../../db/enums'
@@ -41,7 +40,7 @@ export default function ShowBooking({
   }
 
   return (
-    <Layout>
+    <>
       <div>
         <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
       </div>
@@ -64,6 +63,6 @@ export default function ShowBooking({
             </button>
           </div>
         )}
-    </Layout>
+    </>
   )
 }

pages/bookings/[uuid]/stored.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
-import Layout from '../../../components/layout'
 import { Booking } from '../../../db/booking'
 import { loadBookingData, storeBookingData } from '../../../helpers/storage'
 import { getServerSideBooking } from '../../../lib/getServerSideProps'
@@ -19,7 +18,7 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {
   }
 
   return (
-    <Layout>
+    <>
       <h3 className="thanks mb-3 mt-6 text-lg">
         Vielen Dank für die Buchungsanfrage
       </h3>
@@ -52,6 +51,6 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {
           </p>
         </div>
       )}
-    </Layout>
+    </>
   )
 }

pages/impressum.tsx

@@ -5,13 +5,9 @@ import { MDXRemote } from 'next-mdx-remote'
 
 import mdComponents from '../components/mdComponents'
 
-import Layout from '../components/layout'
-
 export default function TermsPage({ source }) {
   return (
-    <Layout>
     <MDXRemote {...source} components={{ ...mdComponents }} />
-    </Layout>
   )
 }
 

pages/index.tsx

@@ -1,9 +1,7 @@
 import Link from 'next/link'
-import Layout from '../components/layout'
 
 export default function Home() {
   return (
-    <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>{' '}
@@ -69,6 +67,5 @@ export default function Home() {
         </Link>
       </p>
     </div>
-    </Layout>
   )
 }

pages/prices.tsx

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

pages/privacy.tsx

@@ -3,15 +3,11 @@ import { serialize } from 'next-mdx-remote/serialize'
 import { MDXRemote } from 'next-mdx-remote'
 import mdComponents from '../components/mdComponents'
 
-import Layout from '../components/layout'
-
 export default function TermsPage({ source }) {
   return (
-    <Layout>
     <div className="text-gray-700">
       <MDXRemote {...source} components={{ ...mdComponents }} />
     </div>
-    </Layout>
   )
 }
 

pages/terms.tsx

@@ -5,15 +5,11 @@ import { MDXRemote } from 'next-mdx-remote'
 
 import mdComponents from '../components/mdComponents'
 
-import Layout from '../components/layout'
-
 export default function TermsPage({ source }) {
   return (
-    <Layout>
     <div className="text-gray-700">
       <MDXRemote {...source} components={{ ...mdComponents }} />
     </div>
-    </Layout>
   )
 }