refactor: create NextLink component and use for all links

unit214 · Nov 20, 2023 · 66b5cde · 66b5cde
1 parent cc630e3
commit 66b5cde
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 31 deletions.
diff --git a/src/app/(header-footer)/imprint/page.tsx b/src/app/(header-footer)/imprint/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import NextLink from '@/components/NextLink';
 
 export default function ImprintPage() {
   return (
@@ -64,14 +64,9 @@ export default function ImprintPage() {
         <p className='text-center'>
           Die Europäische Kommission stellt eine Plattform zur
           Online-Streitbeilegung (OS) bereit:{' '}
-          <Link
-            href='https://ec.europa.eu/consumers/odr/'
-            target='_blank'
-            rel='noopener noreferrer'
-            className='underline'
-          >
+          <NextLink href='https://ec.europa.eu/consumers/odr/' isExternalLink>
             https://ec.europa.eu/consumers/odr/
-          </Link>
+          </NextLink>
           .<br /> Unsere E-Mail-Adresse finden Sie oben im Impressum.
         </p>
       </div>
@@ -85,14 +80,9 @@ export default function ImprintPage() {
         </p>
         <p className='text-center'>
           Quelle:{' '}
-          <Link
-            href='https://www.e-recht24.de'
-            target='_blank'
-            rel='noopener noreferrer'
-            className='underline'
-          >
+          <NextLink href='https://www.e-recht24.de' isExternalLink>
             e-recht24.de
-          </Link>
+          </NextLink>
         </p>
       </div>
     </div>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,16 +1,12 @@
-import Link from 'next/link';
-
 import NextImage from '@/components/NextImage';
+import NextLink from '@/components/NextLink';
 
 export default function Footer({ text, link }: { text: string; link: string }) {
   return (
     <div className='relative mt-20 flex w-full justify-center pb-4 lg:max-w-[1300px]'>
-      <Link
-        href={link}
-        className='font-primary text-xs text-neutral-700 underline'
-      >
+      <NextLink href={link} className='font-primary text-xs text-neutral-700'>
         {text}
-      </Link>
+      </NextLink>
       <NextImage
         alt='dots'
         src='/svg/grey-dots.svg'

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link';
 import { FiMail } from 'react-icons/fi';
 
 import { cn } from '@/lib/utils';
 
 import NextImage from '@/components/NextImage';
+import NextLink from '@/components/NextLink';
 
 function Logo() {
   return (
@@ -44,7 +44,7 @@ export default function Header({
       <div
         style={{ opacity: opacity }}
         className={cn(
-          `mt-5 flex max-h-[100px] w-full items-start justify-between px-5 lg:mt-12 lg:max-w-[1300px] lg:px-16`,
+          'mt-5 flex max-h-[100px] w-full items-start justify-between px-5 lg:mt-12 lg:max-w-[1300px] lg:px-16',
           className
         )}
       >
@@ -54,9 +54,9 @@ export default function Header({
           </button>
         )}
         {clickOnLogoBehaviour === 'goHome' && (
-          <Link href='/'>
+          <NextLink href='/'>
             <Logo />
-          </Link>
+          </NextLink>
         )}
         <div className='grow'></div>
         <button

diff --git a/src/components/NextLink.tsx b/src/components/NextLink.tsx
@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export default function NextLink({
+  href,
+  children,
+  isExternalLink,
+  className,
+}: {
+  href: string;
+  children: ReactNode;
+  isExternalLink?: boolean;
+  className?: string;
+}) {
+  const linkProps = isExternalLink
+    ? { target: '_blank', rel: 'noopener noreferrer' }
+    : {};
+  return (
+    <Link href={href} className={cn('underline', className)} {...linkProps}>
+      {children}
+    </Link>
+  );
+}
diff --git a/src/components/WhoWeAre.tsx b/src/components/WhoWeAre.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link';
 import { ReactElement } from 'react';
 
 import { cn } from '@/lib/utils';
 
 import NextImage from '@/components/NextImage';
+import NextLink from '@/components/NextLink';
 
 function ExternalReferences({
   linkedInLink,
@@ -18,24 +18,24 @@ function ExternalReferences({
 }) {
   return (
     <div className={cn('gap-1', className)}>
-      <Link href={linkedInLink} target='_blank'>
+      <NextLink href={linkedInLink} isExternalLink>
         <NextImage
           src='/svg/linkedin.svg'
           alt='linkedin-logo'
           width={size}
           height={size}
           useSkeleton
         />
-      </Link>
-      <Link href={gitHubLink} target='_blank'>
+      </NextLink>
+      <NextLink href={gitHubLink} isExternalLink>
         <NextImage
           src='/svg/github.svg'
           alt='github-logo'
           width={size}
           height={size}
           useSkeleton
         />
-      </Link>
+      </NextLink>
     </div>
   );
 }