Use next/link

biolab · Oct 27, 2023 · 67b3ce9 · 67b3ce9
1 parent a4e0ef9
commit 67b3ce9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/components/Home/Sections.tsx b/components/Home/Sections.tsx
@@ -101,7 +101,7 @@ export default function HomeSections({ sections }: { sections: any }) {
               <MDXRemote {...section.mdxSource} />
 
               {section.learnMore && (
-                <LinkMore href={`home/${slugify(section.title)}`}>
+                <LinkMore href={`/home/${slugify(section.title)}`}>
                   {" "}
                   Learn more
                 </LinkMore>
@@ -115,7 +115,7 @@ export default function HomeSections({ sections }: { sections: any }) {
                 </LinkMore>
               )}
               {section.buttonText && section.buttonURL && (
-                <LinkMore href={section.buttonURL} target="_blank">
+                <LinkMore href={section.buttonURL}>
                   {section.buttonText}
                 </LinkMore>
               )}

diff --git a/components/UiKit/LinkMore.tsx b/components/UiKit/LinkMore.tsx
@@ -1,7 +1,8 @@
 import styled from "styled-components";
 import device from "@styles/utils/breakpoints";
+import Link from "next/link";
 
-const LinkMore = styled.a`
+const LinkMore = styled(Link)`
   display: inline-block;
   font-size: 22px;
   line-height: 1.36;
@@ -12,7 +13,9 @@ const LinkMore = styled.a`
   background-size: 8px;
   background-repeat: no-repeat;
   padding-right: 20px;
-  transition: background-position 0.3s, opacity 0.3s;
+  transition:
+    background-position 0.3s,
+    opacity 0.3s;
   margin: 15px 25px 10px 0;
 
   @media ${device.L} {