Adjust ButtonLink to allow links open new tab

Author: mariana-caldas

components/buttons/ButtonLink.js

@@ -1,20 +1,24 @@
-import Link from 'next/link';
 import btnStyles from '@/styles/ButtonLink.module.scss';
 
+/*  The component supports the use of target with the property "openNewTab" to open the
+ link in a new tab.*/
+
 export default function ButtonLink({
   customClassName,
   link,
   children,
   styles,
+  openNewTab,
 }) {
   return (
-    <Link href={link}>
-      <a
-        className={`${btnStyles.btn} ${btnStyles[customClassName]}`}
-        style={styles}
-      >
-        {children}
-      </a>
-    </Link>
+    <a
+      href={link}
+      className={`${btnStyles.btn} ${btnStyles[customClassName]}`}
+      style={styles}
+      target={openNewTab ? '_blank' : undefined}
+      rel='noopener noreferrer'
+    >
+      {children}
+    </a>
   );
 }

components/containers/TwoColumn.js

@@ -15,7 +15,8 @@ export default function TwoColumn({
   customInnerClass,
   customBtnClass,
   linkText = 'Learn more',
-  secondTextColumn
+  secondTextColumn,
+  openNewTab,
 }) {
   // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
 
@@ -44,7 +45,11 @@ export default function TwoColumn({
           )}
           <div className={styles.content}>{content}</div>
           {link && (
-            <ButtonLink link={link} customClassName={customBtnClass}>
+            <ButtonLink
+              link={link}
+              customClassName={customBtnClass}
+              openNewTab={openNewTab}
+            >
               {linkText}
             </ButtonLink>
           )}
@@ -57,7 +62,6 @@ export default function TwoColumn({
               alt={altTag}
               className={styles.img}
               layout='fill'
-              priority
             />
           </div>
         )}

pages/about.js

@@ -136,46 +136,36 @@ export default function AboutUs() {
         <TwoColumn
           title='Wanna learn more?'
           content={''}
-          rowOrder='row'
           image='/images/svg/close-curly-bracket.svg'
           color={primary}
           bgColor={lightBgColor}
           customInnerClass='wanna-learn-more'
         />
         <TwoColumn
-          title={
-            <div>
-              Junior <br /> Developers
-            </div>
-          }
+          title={<div>Junior Developers</div>}
           content={
             'If you are a junior web developer looking for some guidance and mentoring, ' +
             'we invite you to join us and start coding our platform. ' +
             "You will learn how to code in a team environment by following issue's " +
             'instructions and submitting your code to our repository through a ' +
             'PR while guided throughout the entire process.\n'
           }
-          rowOrder='row'
           linkText='Our wiki'
+          openNewTab
           link='https://github.com/Web-Dev-Path/web-dev-path/wiki'
           customBtnClass='inverted-grey'
           color={primary}
           bgColor={lightBgColor}
           customInnerClass='two-text-columns'
           secondTextColumn={
             <TwoColumn
-              title={
-                <div>
-                  Experienced <br /> Developers
-                </div>
-              }
+              title={<div>Experienced Developers</div>}
               content={
                 'If you are an experienced and patient-loving developer, ' +
                 'a true rockstar who wants to mentor juniors, ' +
                 "it will be wonderful to have your help to review those PR's, " +
                 'write detailed issues and guide the developers when necessary.\n'
               }
-              rowOrder='row'
               linkText='Contact us'
               link='/contact'
               customBtnClass='inverted-grey'

styles/TwoColumn.module.scss

@@ -122,7 +122,7 @@
         margin: 0;
       }
 
-      .inner__content{
+      .inner__content {
         flex-basis: 70%;
       }
 
@@ -141,8 +141,7 @@
     }
 
     &.two-text-columns {
-      justify-content: center;
-      gap: 170px;
+      justify-content: space-evenly;
 
       .inner {
         padding: 0px;
@@ -160,7 +159,7 @@
         line-height: 2.5rem;
       }
 
-      .inner{
+      .inner {
         margin: 0px;
         padding: 0px;
       }
@@ -169,7 +168,7 @@
         flex-basis: unset;
 
         @include desktop {
-          width: 400px;
+          width: 25rem;
         }
       }