Repository: Afordin/web-afordin
Pull request #69: Use `Link` component instead of `<a>` tag
Author: login: eriandev
Created: 2025-04-24T15:53:03Z | Merged: 2025-04-24T17:36:43Z

`Link` component was created


Diff:
diff --git a/src/components/Community.astro b/src/components/Community.astro
index 9e17864..edd102d 100644
--- a/src/components/Community.astro
+++ b/src/components/Community.astro
@@ -3,6 +3,7 @@ import users from '../data/comunity.json'
 import UserCard from '../components/ui/UserCard.astro'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 import { buttonStyles } from './ui/button.styles'
+import Link from '@/components/Link.astro'
 
 const col1 = users.filter((_, i) => i % 3 === 0)
 const col2 = users.filter((_, i) => i % 3 === 1)
@@ -36,9 +37,9 @@ const t = useTranslations(lang)
 
   <!-- Botón -->
   <div class="z-20 mt-12">
-    <a class={buttonStyles} href="#conocenos">
+    <Link to="#conocenos" class={buttonStyles}>
       {t('community.button')}
-    </a>
+    </Link>
   </div>
 </section>
 
diff --git a/src/components/Contributors.astro b/src/components/Contributors.astro
index 0cdc133..99be4e0 100644
--- a/src/components/Contributors.astro
+++ b/src/components/Contributors.astro
@@ -2,6 +2,7 @@
 import mods from '../data/contributors/mods.json'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 import { buttonStyles } from './ui/button.styles'
+import Link from '@/components/Link.astro'
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
@@ -35,6 +36,6 @@ const t = useTranslations(lang)
   </article>
   <!-- /TODO: Add twitch subs -->
   <div class="flex w-full justify-center">
-    <a target="_blank" class={buttonStyles} href="https://discord.com/invite/comuafor">{t('contributtors.anchor')}</a>
+    <Link external to="https://discord.com/invite/comuafor" class={buttonStyles}>{t('contributtors.anchor')}</Link>
   </div>
 </section>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7c4f87a..f7e5462 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -8,6 +8,7 @@ import Youtube from '@/assets/Youtube.svg'
 import Twitch from '@/assets/Twitch.svg'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 import SelectLanguage from './ui/SelectLanguage.astro'
+import Link from '@/components/Link.astro'
 
 const response = await fetch(`https://api.github.com/repos/Afordin/web-afordin/contributors`)
 const dataDevs: Array<Contributor> = await response.json()
@@ -24,48 +25,47 @@ const t = useTranslations(lang)
     <div class="flex w-full flex-col gap-[36px] border-[#989898] text-center lg:border-r-2 lg:pr-14 lg:text-left">
       <img src="./svg/afordin.svg" alt="afordin" class="mx-auto h-[33px] w-[218px] lg:mx-0" />
       <ul class="flex flex-col gap-3 text-lg">
-        <li><a href="#inicio" class="hover:text-[#BF4D73]">{t('footer.ul.home')}</a></li>
-        <li><a href="#nuestros-valores" class="hover:text-[#BF4D73]">{t('footer.ul.ourValues')}</a></li>
-        <li><a href="#sobre-nosotros" class="hover:text-[#BF4D73]">{t('footer.ul.aboutUs')}</a></li>
-        <li><a href="#eventos" class="hover:text-[#BF4D73]">{t('footer.ul.events')}</a></li>
-        <li><a href="#comunidad" class="hover:text-[#BF4D73]">{t('footer.ul.community')}</a></li>
-        <li><a href="#patrocinadores" class="hover:text-[#BF4D73]">{t('footer.ul.sponsors')}</a></li>
+        <li><Link to="#inicio" class="hover:text-[#BF4D73]">{t('footer.ul.home')}</Link></li>
+        <li><Link to="#nuestros-valores" class="hover:text-[#BF4D73]">{t('footer.ul.ourValues')}</Link></li>
+        <li><Link to="#sobre-nosotros" class="hover:text-[#BF4D73]">{t('footer.ul.aboutUs')}</Link></li>
+        <li><Link to="#eventos" class="hover:text-[#BF4D73]">{t('footer.ul.events')}</Link></li>
+        <li><Link to="#comunidad" class="hover:text-[#BF4D73]">{t('footer.ul.community')}</Link></li>
+        <li><Link to="#patrocinadores" class="hover:text-[#BF4D73]">{t('footer.ul.sponsors')}</Link></li>
       </ul>
       <SelectLanguage />
       <div class="flex flex-col gap-2">
         <p class="text-sm">
           {t('footer.paragraph.designed')}
-          <a
-            href="https://discord.com/invite/comuafor"
+          <Link
+            to="https://discord.com/invite/comuafor"
             class="relative font-semibold text-white no-underline underline-offset-4 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 after:bg-white after:transition-all after:duration-300 after:ease-in-out after:content-[''] hover:after:w-full"
           >
             Comuafor
-          </a>
+          </Link>
         </p>
 
         <div class="flex justify-center gap-2 lg:justify-start">
-          <a
-            href="https://discord.com/invite/comuafor"
-            target="_blank"
-            rel="noopener noreferrer"
+          <Link
+            external
+            to="https://discord.com/invite/comuafor"
             class="grid h-9 w-9 place-items-center transition-all duration-500 ease-in-out hover:rotate-[360deg] hover:rounded-full hover:bg-[#5868F2]"
           >
-            <Discord /></a
-          >
-          <a
-            href="https://www.youtube.com/@afor_lives"
-            target="_blank"
-            rel="noopener noreferrer"
+            <Discord />
+          </Link>
+          <Link
+            external
+            to="https://www.youtube.com/@afor_lives"
             class="grid h-9 w-9 place-items-center transition-all duration-500 ease-in-out hover:rotate-[360deg] hover:rounded-full hover:bg-[#C4302B]"
-            ><Youtube /></a
           >
-          <a
-            href="https://www.twitch.tv/afor_digital"
-            target="_blank"
-            rel="noopener noreferrer"
+            <Youtube />
+          </Link>
+          <Link
+            external
+            to="https://www.twitch.tv/afor_digital"
             class="grid h-9 w-9 place-items-center transition-all duration-500 ease-in-out hover:rotate-[360deg] hover:rounded-full hover:bg-[#6441A5]"
-            ><Twitch /></a
           >
+            <Twitch />
+          </Link>
         </div>
       </div>
     </div>
@@ -83,8 +83,9 @@ const t = useTranslations(lang)
         <div class="contend-end flex flex-col items-center gap-4 lg:items-end">
           <h3 class="text-lg">{t('footer.title.viewers')}</h3>
           <div class="flex h-full w-fit flex-wrap items-center justify-end -space-x-3 hover:space-x-0">
-            <a
-              href="https://www.linkedin.com/in/saramonrod/"
+            <Link
+              external
+              to="https://www.linkedin.com/in/saramonrod/"
               class="group relative transform transition-all duration-500 ease-in-out"
             >
               <img src="./avatar/ema-avatar.jpg" alt="EmaLozada" class="h-11 w-11 rounded-full shadow-inner" />
@@ -109,7 +110,7 @@ const t = useTranslations(lang)
                   <div class="h-0 w-fit border-t-8 border-r-8 border-l-8 border-transparent border-t-[#0072B1]"></div>
                 </div>
               </div>
-            </a>
+            </Link>
           </div>
         </div>
       </div>
diff --git a/src/components/FooterContributors.astro b/src/components/FooterContributors.astro
index 353f931..b82e7c1 100644
--- a/src/components/FooterContributors.astro
+++ b/src/components/FooterContributors.astro
@@ -1,4 +1,5 @@
 ---
+import Link from '@/components/Link.astro'
 import type { Contributor } from '@/types/index.d'
 
 interface Props {
@@ -12,7 +13,11 @@ const { contributors } = Astro.props
   {
     contributors?.map((contributor: Contributor) => {
       return (
-        <a href={contributor.html_url} class="group relative transform transition-all duration-500 ease-in-out">
+        <Link
+          external
+          to={contributor.html_url}
+          class="group relative transform transition-all duration-500 ease-in-out"
+        >
           <img src={contributor.avatar_url} alt={contributor.login} class="h-11 w-11 rounded-full shadow-inner" />
           <div class="hidden group-hover:block">
             <div class="group absolute -top-12 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center rounded-sm px-3 py-[6px] text-center text-sm font-semibold text-[#111111] before:-top-2">
@@ -31,7 +36,7 @@ const { contributors } = Astro.props
               <div class="h-0 w-fit border-t-8 border-r-8 border-l-8 border-transparent border-t-white" />
             </div>
           </div>
-        </a>
+        </Link>
       )
     })
   }
diff --git a/src/components/FooterDesignersContributors.astro b/src/components/FooterDesignersContributors.astro
index 310ab58..7fe388b 100644
--- a/src/components/FooterDesignersContributors.astro
+++ b/src/components/FooterDesignersContributors.astro
@@ -1,4 +1,5 @@
 ---
+import Link from '@/components/Link.astro'
 import type { Contributor } from '@/types/index.d'
 
 interface Props {
@@ -12,7 +13,11 @@ const { contributors } = Astro.props
   {
     contributors.map((contributor: Contributor) => {
       return (
-        <a href={contributor.html_url} class="group relative transform transition-all duration-500 ease-in-out">
+        <Link
+          external
+          to={contributor.html_url}
+          class="group relative transform transition-all duration-500 ease-in-out"
+        >
           <img src={contributor.avatar_url} alt={contributor.login} class="h-11 w-11 rounded-full shadow-inner" />
           <div class="hidden group-hover:block">
             <div class="group absolute -top-12 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center rounded-sm text-center text-sm font-semibold text-white before:-top-2">
@@ -34,7 +39,7 @@ const { contributors } = Astro.props
               <div class="h-0 w-fit border-t-8 border-r-8 border-l-8 border-transparent border-t-[#0072B1]" />
             </div>
           </div>
-        </a>
+        </Link>
       )
     })
   }
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 89fc509..5519348 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -2,6 +2,7 @@
 import SaluteHand from '@/components/SaluteHand.astro'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 import { buttonStyles } from './ui/button.styles'
+import Link from '@/components/Link.astro'
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
@@ -22,9 +23,9 @@ const t = useTranslations(lang)
     <h1 class="text-hero-title font-bold">{t('hero.title')} <br /> {t('hero.title.second')}</h1>
     <p class="text-hero-paragraph">{t('hero.paragraph')}</p>
   </hgroup>
-  <a target="_blank" class={buttonStyles} href="https://lenguajehtml.com/html/semantica/etiqueta-html-h1/"
-    >{t('hero.button')}</a
-  >
+  <Link external to="https://lenguajehtml.com/html/semantica/etiqueta-html-h1/" class={buttonStyles}>
+    {t('hero.button')}
+  </Link>
   <video
     class="pointer-events-none absolute top-0 left-0 -z-10 aspect-video w-full"
     src="/media/header.webm"
diff --git a/src/components/LastProjects.astro b/src/components/LastProjects.astro
index eb6d407..bbcd6bf 100644
--- a/src/components/LastProjects.astro
+++ b/src/components/LastProjects.astro
@@ -1,6 +1,7 @@
 ---
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 import { buttonStyles } from './ui/button.styles'
+import Link from '@/components/Link.astro'
 
 const PROJECTS_INFO = [
   {
@@ -43,7 +44,7 @@ const t = useTranslations(lang)
   <div class="flex flex-col items-center gap-4">
     <h2 class="text-5xl font-bold drop-shadow-md">{t('lastProject.title')}</h2>
     <p class="mb-4 text-lg md:text-xl">{t('lastProject.paragraph')}</p>
-    <a class={buttonStyles} href="#conocenos">{t('lastProject.anchor')}</a>
+    <Link to="#conocenos" class={buttonStyles}>{t('lastProject.anchor')}</Link>
   </div>
 </section>
 
diff --git a/src/components/Link.astro b/src/components/Link.astro
new file mode 100644
index 0000000..2156371
--- /dev/null
+++ b/src/components/Link.astro
@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
+  to: string
+  external?: boolean
+}
+
+const { to, external = false, ...restProps } = Astro.props
+const rel = external ? 'noopener noreferrer' : null
+const target = external ? '_blank' : null
+---
+
+<a {rel} {target} href={to} {...restProps}>
+  <slot />
+</a>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index c3ecebf..c051fae 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -1,5 +1,6 @@
 ---
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
+import Link from '@/components/Link.astro'
 import Github from '../assets/Github.svg?url'
 import Discord from '../assets/Discord.svg?url'
 import Logo from '../assets/Logo.svg?url'
@@ -7,42 +8,41 @@ import Logo from '../assets/Logo.svg?url'
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
 
-
 const links = [
   {
-    href: '/',
+    to: '/',
     name: t('nav.home'),
   },
   {
-    href: '#',
+    to: '#',
     name: t('nav.values'),
   },
   {
-    href: '#',
+    to: '#',
     name: t('nav.projects'),
   },
   {
-    href: '#',
+    to: '#',
     name: t('nav.events'),
   },
   {
-    href: '#',
+    to: '#',
     name: t('nav.contributor'),
   },
-] satisfies Array<{ href: string; name: string }>
+] satisfies Array<{ to: string; name: string }>
 
 const socialLinks = [
   {
-    href: 'https://www.github.com/Afordin',
+    to: 'https://www.github.com/Afordin',
     name: 'github',
-    icon: Github
+    icon: Github,
   },
   {
-    href: 'https://discord.com/invite/comuafor',
+    to: 'https://discord.com/invite/comuafor',
     name: 'discord',
-    icon: Discord
+    icon: Discord,
   },
-] satisfies Array<{ href: string; name: string; icon: any}>
+] satisfies Array<{ to: string; name: string; icon: any }>
 ---
 
 <header class="fixed inset-x-0 top-0 z-50 container mx-auto">
@@ -50,9 +50,9 @@ const socialLinks = [
     class="mt-12 flex items-center justify-between gap-6 rounded-full border border-orange-600/20 bg-gradient-to-br from-white/15 to-white/0 px-8 py-2 shadow-lg backdrop-blur-md transition-all duration-300 ease-in-out"
   >
     <div>
-      <a href="/">
+      <Link to="/">
         <img src={Logo} alt="Logo de Afordin" />
-      </a>
+      </Link>
     </div>
     <div class="flex lg:hidden">
       <button
@@ -72,23 +72,30 @@ const socialLinks = [
 
     <!-- Navigation menu for large screens -->
     <div class="hidden lg:flex lg:items-center lg:gap-6">
-      {links.map((link, index) => (
-        <>
-          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
-            {link.name}
-          </a>
-          {index < links.length - 1 && <span class="text-[8px] text-gray-300">●</span>}
-        </>
-      ))}
+      {
+        links.map(({ name, to }, index) => (
+          <>
+            <Link
+              {to}
+              class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+            >
+              {name}
+            </Link>
+            {index < links.length - 1 && <span class="text-[8px] text-gray-300">●</span>}
+          </>
+        ))
+      }
     </div>
 
     <!-- Social media icons for large screens -->
     <div class="hidden items-center justify-center gap-4 lg:flex">
-      {socialLinks.map((link) => (
-        <a href={link.href} target="_blank" class="inline-block transition-transform duration-300 hover:scale-110">
-          <img src={link.icon} alt={`Icono de ${link.name}`} class="h-11 w-11" />
-        </a>
-      ))}
+      {
+        socialLinks.map(({ icon, name, to }) => (
+          <Link external {to} class="inline-block transition-transform duration-300 hover:scale-110">
+            <img src={icon} alt={`Icono de ${name}`} class="h-11 w-11" />
+          </Link>
+        ))
+      }
     </div>
   </nav>
 
@@ -103,22 +110,25 @@ const socialLinks = [
       class="flex flex-col gap-4 rounded-2xl border border-white/40 bg-gradient-to-br from-white/15 to-white/0 shadow-lg backdrop-blur-md"
     >
       <div class="flex flex-col items-center gap-5 pt-6 pb-4">
-        {links.map((link) => (
-          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
-            {link.name}
-          </a>
-        ))}
+        {
+          links.map(({ name, to }) => (
+            <Link
+              {to}
+              class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+            >
+              {name}
+            </Link>
+          ))
+        }
       </div>
       <div class="flex flex-row items-center justify-center gap-6 border-t border-white/40 py-3">
-        {socialLinks.map((link) => (
-          <a
-            href={link.href}
-            target="_blank"
-            class="inline-block transition-transform duration-300 hover:scale-110"
-          >
-            <img src={link.icon} alt={`Icono de ${link.name}`} class="h-11 w-11" />
-          </a>
-        ))}
+        {
+          socialLinks.map(({ icon, name, to }) => (
+            <Link {to} external class="inline-block transition-transform duration-300 hover:scale-110">
+              <img src={icon} alt={`Icono de ${name}`} class="h-11 w-11" />
+            </Link>
+          ))
+        }
       </div>
     </div>
   </div>
@@ -172,4 +182,4 @@ const socialLinks = [
       window.addEventListener('scroll', handleScroll)
     }
   })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/ui/SelectLanguage.astro b/src/components/ui/SelectLanguage.astro
index 9ab16dd..4e405a1 100644
--- a/src/components/ui/SelectLanguage.astro
+++ b/src/components/ui/SelectLanguage.astro
@@ -1,11 +1,12 @@
 ---
 import { languages } from '@/i18n/ui.ts'
+import Link from '@/components/Link.astro'
 ---
 
 <ul class="flex flex-row justify-center gap-2 lg:justify-start">
   {
     Object.entries(languages).map(([lang, label]) => (
-      <li>{lang === 'es' ? <a href={`/`}>{label}</a> : <a href={`/${lang}`}>{label}</a>}</li>
+      <li>{lang === 'es' ? <Link to="/">{label}</Link> : <Link to={`/${lang}`}>{label}</Link>}</li>
     ))
   }
 </ul>


Reviews:
user: login: felixicaza
body: Tremendo refactor 🚀. Solo comento algunas sugerencias.
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-24T17:21:08Z
user: login: eriandev
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T17:56:49Z

Review comments:
diff_hunk: @@ -72,23 +72,30 @@ const socialLinks = [
 
     <!-- Navigation menu for large screens -->
     <div class="hidden lg:flex lg:items-center lg:gap-6">
-      {links.map((link, index) => (
-        <>
-          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
-            {link.name}
-          </a>
-          {index < links.length - 1 && <span class="text-[8px] text-gray-300">●</span>}
-        </>
-      ))}
+      {
+        links.map(({ name, to }, index) => (
+          <>
+            <Link
+              {to}
path: src/components/Nav.astro
user: login: felixicaza
body: ¿Podrías utilizar el atributo explicito en lugar de la desestructuración?
`<Link to={to}>`

Esto para que seguir la estructura de acuerdo a las props del componente.
created_at: 2025-04-24T17:19:30Z
author_association: COLLABORATOR
diff_hunk: @@ -72,23 +72,30 @@ const socialLinks = [
 
     <!-- Navigation menu for large screens -->
     <div class="hidden lg:flex lg:items-center lg:gap-6">
-      {links.map((link, index) => (
-        <>
-          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
-            {link.name}
-          </a>
-          {index < links.length - 1 && <span class="text-[8px] text-gray-300">●</span>}
-        </>
-      ))}
+      {
+        links.map(({ name, to }, index) => (
+          <>
+            <Link
+              {to}
+              class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+            >
+              {name}
+            </Link>
+            {index < links.length - 1 && <span class="text-[8px] text-gray-300">●</span>}
+          </>
+        ))
+      }
     </div>
 
     <!-- Social media icons for large screens -->
     <div class="hidden items-center justify-center gap-4 lg:flex">
-      {socialLinks.map((link) => (
-        <a href={link.href} target="_blank" class="inline-block transition-transform duration-300 hover:scale-110">
-          <img src={link.icon} alt={`Icono de ${link.name}`} class="h-11 w-11" />
-        </a>
-      ))}
+      {
+        socialLinks.map(({ icon, name, to }) => (
+          <Link external {to} class="inline-block transition-transform duration-300 hover:scale-110">
path: src/components/Nav.astro
user: login: felixicaza
body: Acá también.
created_at: 2025-04-24T17:19:42Z
author_association: COLLABORATOR
diff_hunk: @@ -103,22 +110,25 @@ const socialLinks = [
       class="flex flex-col gap-4 rounded-2xl border border-white/40 bg-gradient-to-br from-white/15 to-white/0 shadow-lg backdrop-blur-md"
     >
       <div class="flex flex-col items-center gap-5 pt-6 pb-4">
-        {links.map((link) => (
-          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
-            {link.name}
-          </a>
-        ))}
+        {
+          links.map(({ name, to }) => (
+            <Link
+              {to}
path: src/components/Nav.astro
user: login: felixicaza
body: Acá también.
created_at: 2025-04-24T17:19:54Z
author_association: COLLABORATOR
diff_hunk: @@ -103,22 +110,25 @@ const socialLinks = [
       class="flex flex-col gap-4 rounded-2xl border border-white/40 bg-gradient-to-br from-white/15 to-white/0 shadow-lg backdrop-blur-md"
     >
       <div class="flex flex-col items-center gap-5 pt-6 pb-4">
-        {links.map((link) => (
-          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
-            {link.name}
-          </a>
-        ))}
+        {
+          links.map(({ name, to }) => (
+            <Link
+              {to}
+              class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+            >
+              {name}
+            </Link>
+          ))
+        }
       </div>
       <div class="flex flex-row items-center justify-center gap-6 border-t border-white/40 py-3">
-        {socialLinks.map((link) => (
-          <a
-            href={link.href}
-            target="_blank"
-            class="inline-block transition-transform duration-300 hover:scale-110"
-          >
-            <img src={link.icon} alt={`Icono de ${link.name}`} class="h-11 w-11" />
-          </a>
-        ))}
+        {
+          socialLinks.map(({ icon, name, to }) => (
+            <Link {to} external class="inline-block transition-transform duration-300 hover:scale-110">
path: src/components/Nav.astro
user: login: felixicaza
body: Lo mismo acá.
created_at: 2025-04-24T17:20:04Z
author_association: COLLABORATOR
diff_hunk: @@ -72,23 +72,30 @@ const socialLinks = [
 
     <!-- Navigation menu for large screens -->
     <div class="hidden lg:flex lg:items-center lg:gap-6">
-      {links.map((link, index) => (
-        <>
-          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
-            {link.name}
-          </a>
-          {index < links.length - 1 && <span class="text-[8px] text-gray-300">●</span>}
-        </>
-      ))}
+      {
+        links.map(({ name, to }, index) => (
+          <>
+            <Link
+              {to}
path: src/components/Nav.astro
user: login: eriandev
body: @felixicaza no entendí,
te refieres a la destructuración de `{ name, to }` para que lo use `<Link to={link.to}>`,
o te refieres a que no haga lo de `{to}` y siempre haga la asignación de la prop `to={to}`?
created_at: 2025-04-24T17:56:48Z
author_association: CONTRIBUTOR

PR comments:
user: login: netlify[bot]
created_at: 2025-04-24T15:53:17Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *afordin* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 8c45a3e9b6d166135a92d8e729995231ddacd000 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/afordin/deploys/680a5e6255a7f50008c76a8a |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-69--afordin.netlify.app](https://deploy-preview-69--afordin.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTY5LS1hZm9yZGluLm5ldGxpZnkuYXBwIn0.bm2YN41KU76W8y4_gTL9AlBfHGenMCNEBkNVwkSBnvQ)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [afordin Preview](https://deploy-preview-69--afordin.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/afordin/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: afordigital
created_at: 2025-04-24T17:36:40Z
body: Bueníiiiiiisima PR!!!! Amé el refactor, cambiamos lo que comentó felix y mergeamos 🐀
author_association: MEMBER