CHORE: Fix deprecated Links

sethkrasnianski · Jul 29, 2024 · eb865fe · eb865fe
1 parent f600cab
commit eb865fe
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 33 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -28,9 +28,7 @@ const Footer: React.FC = () => {
         <i className="icon icon-linkedin-square"></i>
       </a>
       <div className="right menu">
-        <Link href="/contact">
-          <a>Contact</a>
-        </Link>
+        <Link href="/contact">Contact</Link>
       </div>
     </footer>
   );

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,40 +1,17 @@
 import Link from "next/link";
+import Logo from "./Logo";
 import styles from "./Header.module.scss";
 
 const Header: React.FC = () => {
   return (
     <header className={styles.header}>
-      <Link href="/">
-        <a>
-          <svg
-            id="logo"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 122 82"
-            width="51px"
-            height="31px"
-            fill="currentColor"
-          >
-            <path
-              className="a"
-              d="M0,0V82H122V0H0ZM117,77H5V5H117V77Z"
-            ></path>
-            <path
-              className="a"
-              d="M40.88,25.78a12.74,12.74,0,0,0-4.1-4.67A11.41,11.41,0,0,0,30,19.22c-6.82,0-11.81,4.36-11.81,10.86A8.74,8.74,0,0,0,21.12,37a18.64,18.64,0,0,0,5.62,3.47l3.79,1.77a18.37,18.37,0,0,1,5,2.9,6.28,6.28,0,0,1,2,4.92c0,4.23-2.71,8.33-8.46,8.33A8,8,0,0,1,23.11,56a9.94,9.94,0,0,1-2.53-5.37L16,51.92a15.26,15.26,0,0,0,3.91,7.45,12.56,12.56,0,0,0,9.15,3.41c7.58,0,13.32-5.18,13.32-12.94a10.13,10.13,0,0,0-3-7.64,20.45,20.45,0,0,0-6.5-4l-4-1.77a13.75,13.75,0,0,1-4.42-2.65,4.42,4.42,0,0,1-1.62-3.64c0-3.91,2.9-6.5,7.07-6.5a7.58,7.58,0,0,1,4.73,1.45,10.15,10.15,0,0,1,2.46,3.16Zm16.44-5.87V50.34c0,2.59,0,5.24-1.58,6.82a4.44,4.44,0,0,1-3.16,1.2A6.81,6.81,0,0,1,47.76,56l-2.59,3.66a9.55,9.55,0,0,0,7.51,3.09,8.65,8.65,0,0,0,6.69-2.65c2.53-2.65,2.6-6.5,2.6-9.91V19.91H57.32Zm23.75,0h-4.7V62H81V43.9l1.2-1.2L99.52,62H106L85.59,39.55l19.7-19.63H99L81,38V19.91h0Z"
-            ></path>
-          </svg>
-        </a>
-      </Link>
+      <Link href="/"><Logo /></Link>
       <ul className="menu right">
         <li>
-          <Link href="/thoughts">
-            <a>Thoughts</a>
-          </Link>
+          <Link href="/thoughts">Thoughts</Link>
         </li>
         <li>
-          <Link href="/contact">
-            <a>Contact</a>
-          </Link>
+          <Link href="/contact">Contact</Link>
         </li>
       </ul>
     </header>

diff --git a/components/Logo.tsx b/components/Logo.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+
+export default function Logo(): ReactElement {
+  return (
+    <svg
+      id="logo"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 122 82"
+      width="51px"
+      height="31px"
+      fill="currentColor"
+    >
+      <path className="a" d="M0,0V82H122V0H0ZM117,77H5V5H117V77Z"></path>
+      <path
+        className="a"
+        d="M40.88,25.78a12.74,12.74,0,0,0-4.1-4.67A11.41,11.41,0,0,0,30,19.22c-6.82,0-11.81,4.36-11.81,10.86A8.74,8.74,0,0,0,21.12,37a18.64,18.64,0,0,0,5.62,3.47l3.79,1.77a18.37,18.37,0,0,1,5,2.9,6.28,6.28,0,0,1,2,4.92c0,4.23-2.71,8.33-8.46,8.33A8,8,0,0,1,23.11,56a9.94,9.94,0,0,1-2.53-5.37L16,51.92a15.26,15.26,0,0,0,3.91,7.45,12.56,12.56,0,0,0,9.15,3.41c7.58,0,13.32-5.18,13.32-12.94a10.13,10.13,0,0,0-3-7.64,20.45,20.45,0,0,0-6.5-4l-4-1.77a13.75,13.75,0,0,1-4.42-2.65,4.42,4.42,0,0,1-1.62-3.64c0-3.91,2.9-6.5,7.07-6.5a7.58,7.58,0,0,1,4.73,1.45,10.15,10.15,0,0,1,2.46,3.16Zm16.44-5.87V50.34c0,2.59,0,5.24-1.58,6.82a4.44,4.44,0,0,1-3.16,1.2A6.81,6.81,0,0,1,47.76,56l-2.59,3.66a9.55,9.55,0,0,0,7.51,3.09,8.65,8.65,0,0,0,6.69-2.65c2.53-2.65,2.6-6.5,2.6-9.91V19.91H57.32Zm23.75,0h-4.7V62H81V43.9l1.2-1.2L99.52,62H106L85.59,39.55l19.7-19.63H99L81,38V19.91h0Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/pages/thoughts/index.tsx b/pages/thoughts/index.tsx
@@ -28,9 +28,7 @@ export default function ThoughtsPage({
               <div className="day">{day}</div>
             </aside>
             <Link href={`/thoughts/${thought.meta.slug}`}>
-              <a>
-                <h2>{thought.meta.title}</h2>
-              </a>
+              <h2>{thought.meta.title}</h2>
             </Link>
             <p>
               {content.substring(0, 275)}