feat: replace anchor tag with <Link />

Author: codingcodax

apps/www/src/app/(main)/_components/ContactMe/ContactMe.tsx

@@ -1,5 +1,7 @@
 import { clsx } from 'clsx/lite';
 
+import { Link } from '@acme/ui/Link';
+
 import { fadeUp } from '~/config/animations';
 
 type Props = { variant: 'expanded' | 'collapsed' };
@@ -20,30 +22,29 @@ export const ContactMe = ({ variant }: Props) => {
         <p className='text-sm text-grey-text sm:text-base'>
           If you have any questions, opportunities or would just like to say
           hello, then feel free to send me a DM (
-          <a
-            className='text-grey-text-contrast decoration-grey-text-contrast decoration-dashed underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text-contrast focus-visible:ring-offset-1'
+          <Link
+            isExternal
+            className='text-sm text-grey-text-contrast sm:text-base'
             href='https://dm.new/codingcodax'
-            rel='noopener noreferrer'
-            target='_blank'
           >
             X
-          </a>{' '}
+          </Link>{' '}
           or{' '}
-          <a
-            className='text-grey-text-contrast decoration-grey-text-contrast decoration-dashed underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text-contrast focus-visible:ring-offset-1'
+          <Link
+            isExternal
+            className='text-sm text-grey-text-contrast sm:text-base'
             href='https://www.linkedin.com/in/codingcodax'
-            rel='noopener noreferrer'
-            target='_blank'
           >
             LinkedIn
-          </a>
+          </Link>
           ) or if you prefer, you can{' '}
-          <a
-            className='text-grey-text-contrast decoration-grey-text-contrast decoration-dashed underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text-contrast focus-visible:ring-offset-1'
+          <Link
+            isExternal
+            className='text-sm text-grey-text-contrast sm:text-base'
             href='emailto:[email protected]'
           >
             email me
-          </a>
+          </Link>
           .
         </p>
       </div>

apps/www/src/app/(main)/_components/Footer/Footer.tsx

@@ -1,3 +1,5 @@
+import { Link } from '@acme/ui/Link';
+
 export const Footer = () => {
   const currentYear = new Date().getFullYear();
 
@@ -11,36 +13,33 @@ export const Footer = () => {
 
       <ul className='flex gap-2'>
         <li>
-          <a
-            className='text-sm text-grey-text decoration-grey-text decoration-dashed decoration-1 underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text focus-visible:ring-offset-1'
+          <Link
+            isExternal
+            className='text-sm text-grey-text'
             href='https://github.com/codingcodax'
-            rel='noopener noreferrer'
-            target='_blank'
           >
             GitHub
-          </a>
+          </Link>
         </li>
 
         <li>
-          <a
-            className='text-sm text-grey-text decoration-grey-text decoration-dashed decoration-1 underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text focus-visible:ring-offset-1'
+          <Link
+            isExternal
+            className='text-sm text-grey-text'
             href='https://www.linkedin.com/in/codingcodax'
-            rel='noopener noreferrer'
-            target='_blank'
           >
             LinkedIn
-          </a>
+          </Link>
         </li>
 
         <li>
-          <a
-            className='text-sm text-grey-text decoration-grey-text decoration-dashed decoration-1 underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text focus-visible:ring-offset-1'
+          <Link
+            isExternal
+            className='text-sm text-grey-text'
             href='https://x.com/codingcodax'
-            rel='noopener noreferrer'
-            target='_blank'
           >
             X
-          </a>
+          </Link>
         </li>
       </ul>
     </footer>

apps/www/src/app/(main)/about/page.tsx

@@ -1,6 +1,8 @@
 import type { NextPage } from 'next';
 import { clsx } from 'clsx/lite';
 
+import { Link } from '@acme/ui/Link';
+
 import { Hero } from '~/app/(main)/_components/Hero';
 import { fadeUp } from '~/config/animations';
 import { ContactMe } from '../_components/ContactMe';
@@ -42,23 +44,21 @@ const About: NextPage = () => {
 
             <p>
               As a co-founder of{' '}
-              <a
-                className='text-grey-text-contrast decoration-grey-text-contrast decoration-dashed decoration-1 underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text focus-visible:ring-offset-1'
+              <Link
+                isExternal
+                className='text-grey-text-contrast'
                 href='https://www.khutz.com/'
-                rel='noopener noreferrer'
-                target='_blank'
               >
                 Khutz
-              </a>
+              </Link>
               , alongside{' '}
-              <a
-                className='text-grey-text-contrast decoration-grey-text-contrast decoration-dashed decoration-1 underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-grey-text focus-visible:ring-offset-1'
+              <Link
+                isExternal
+                className='text-grey-text-contrast'
                 href='https://github.com/OscarStrada/'
-                rel='noopener noreferrer'
-                target='_blank'
               >
                 Oscar Arturo
-              </a>
+              </Link>
               , we led our first big project, Docom, which focused on building a
               healthcare CRM. This experience has fueled my passion for creating
               helpful solutions that enhance experiences.