fix Link components with anchor

components/bookingTable.tsx

@@ -27,8 +27,8 @@ export default function BookingTable({
     {
       name: 'Email',
       value: (
-        <Link href={`mailto:${booking.email}`}>
+        <Link href={`mailto:${booking.email}`} className="link">
-          <a className="link">{booking.email}</a>
+          {booking.email}
         </Link>
       ),
     },
@@ -42,8 +42,8 @@ export default function BookingTable({
     >
       <div className="px-4 py-5 sm:px-6">
         <h3 className="text-lg leading-6 font-medium text-gray-900">
-          <Link href={`/admin/bookings/${booking.uuid}`}>
+          <Link href={`/admin/bookings/${booking.uuid}`} className="link">
-            <a className="link">Booking {booking.uuid}</a>
+            Booking {booking.uuid}
           </Link>
         </h3>
         <p className="mt-1 max-w-2xl text-sm text-gray-500">

components/footer.tsx

@@ -7,21 +7,19 @@ export default function Footer() {
     <footer>
       <div className="flex flex-col sm:flex-row max-w-7xl mx-auto px-4 sm:px-6 my-5">
         <div className="flex-grow">
-          <Link href="/">
+          <Link href="/" className="underline">
-            <a className="underline">
               <Logo className="h-12 w-auto sm:h-14" />
-            </a>
           </Link>
         </div>
         <ul className="flex flex-col gap-2 sm:flex-row sm:items-end ">
           <li>
-            <Link href="/privacy">
+            <Link href="/privacy" className="underline">
-              <a className="underline">Datenschutzerklärung</a>
+              Datenschutzerklärung
             </Link>
           </li>
           <li>
-            <Link href="/impressum">
+            <Link href="/impressum" className="underline">
-              <a className="underline">Impressum</a>
+              Impressum
             </Link>
           </li>
         </ul>

components/header.tsx

@@ -43,10 +43,8 @@ export default function Header() {
         <div className="max-w-7xl mx-auto px-4 sm:px-6">
           <div className="relative flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
             <div className="flex justify-start lg:w-0 flex-1">
-              <Link href="/">
+              <Link href="/" className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl">
-                <a className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl">
                   Pfadi-Bussle
-                </a>
               </Link>
             </div>
             <nav className="hidden space-x-10 sm:flex">

components/navigation.tsx

@@ -37,10 +37,8 @@ export default function Navigation() {
           <span className="font-extrabold">{pathLabel}</span>
         </h2>
         {status === 'authenticated' && data.user.email && (
-          <Link href="/admin">
+          <Link href="/admin" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
-            <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
               Buchungen
-            </a>
           </Link>
         )}
         <div className="flex-grow" />

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

@@ -66,8 +66,8 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
         >
           Buchung Abweisen
         </button>
-        <Link href={`${router.asPath}/bill`}>
+        <Link href={`${router.asPath}/bill`} className="btn btn-gray">
-          <a className="btn btn-gray">Rechnung</a>
+          Rechnung
         </Link>
       </div>
     </>

pages/bookings/[uuid]/stored.tsx

@@ -27,8 +27,8 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {
       </p>
       <p>
         Den{' '}
-        <Link href={`/bookings/${booking.uuid}`}>
+        <Link href={`/bookings/${booking.uuid}`} className="link underline">
-          <a className="link underline">Link</a>
+          Link
         </Link>{' '}
         zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung auch
         jederzeit storniert werden.

pages/index.tsx

@@ -19,20 +19,18 @@ export default function Home() {
         dritte Sitzreihe können ausgebaut werden.
       </p>
       <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
-        <Link href="/prices">
+        <Link href="/prices" className="underline hover:text-blue-700">
-          <a className="underline hover:text-blue-700">Preise</a>
+          Preise
         </Link>{' '}
         und{' '}
-        <Link href="/terms">
+        <Link href="/terms" className="underline hover:text-blue-700">
-          <a className="underline hover:text-blue-700">Mietbedingungen</a>
+          Mietbedingungen
         </Link>
       </p>
       <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
         <div className="rounded-md shadow">
-          <Link href="/book">
+          <Link href="/book" className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
-            <a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
+            Zur Buchungsanfrage
-              Zur Buchungsanfrage
-            </a>
           </Link>
         </div>
       </div>
@@ -53,17 +51,15 @@ export default function Home() {
           0151 / 21225302
         </a>{' '}
         oder{' '}
-        <Link href="https://wa.me/4915121225362">
+        <Link href="https://wa.me/4915121225362" className="underline inline-flex flex-row items-baseline hover:text-blue-700">
-          <a className="underline inline-flex flex-row items-baseline hover:text-blue-700">
+          <svg
-            <svg
+            xmlns="http://www.w3.org/2000/svg"
-              xmlns="http://www.w3.org/2000/svg"
+            className="fill-current h-4 inline"
-              className="fill-current h-4 inline"
+            viewBox="0 0 738 741"
-              viewBox="0 0 738 741"
+          >
-            >
+            <title>Whatsapp</title>
-              <title>Whatsapp</title>
+            <path d="M630 108A368 368 0 0052 551L0 741l195-51a368 368 0 00435-582M370 672c-55 0-108-14-155-42l-11-7-116 31 31-113-7-12A304 304 0 01370 62a303 303 0 01306 305c-1 169-137 305-306 305m168-228l-63-30c-8-3-15-4-21 5l-29 36c-5 6-10 7-20 2-9-5-38-14-73-46-28-24-46-54-51-63-6-9-1-14 4-19l13-16c5-5 7-9 10-15s1-12-1-16l-28-68c-8-18-15-16-21-16h-18c-6 0-16 2-24 11-9 9-32 31-32 77s33 88 37 94c5 7 65 99 157 139l52 19c22 7 42 6 58 4 18-3 54-22 62-44 8-21 8-40 5-43-2-4-8-6-17-11" />
-              <path d="M630 108A368 368 0 0052 551L0 741l195-51a368 368 0 00435-582M370 672c-55 0-108-14-155-42l-11-7-116 31 31-113-7-12A304 304 0 01370 62a303 303 0 01306 305c-1 169-137 305-306 305m168-228l-63-30c-8-3-15-4-21 5l-29 36c-5 6-10 7-20 2-9-5-38-14-73-46-28-24-46-54-51-63-6-9-1-14 4-19l13-16c5-5 7-9 10-15s1-12-1-16l-28-68c-8-18-15-16-21-16h-18c-6 0-16 2-24 11-9 9-32 31-32 77s33 88 37 94c5 7 65 99 157 139l52 19c22 7 42 6 58 4 18-3 54-22 62-44 8-21 8-40 5-43-2-4-8-6-17-11" />
+          </svg>
-            </svg>
-          </a>
         </Link>
       </p>
     </div>