Test: ExternalLink Component

Ejemplo 1: Enlace con icono (default)

Enlace externo con icono y abre en nueva pestaña: El fin de la INERCIA

Ejemplo 2: Enlace sin icono

Enlace externo sin icono visual: Comprar en Amazon

Ejemplo 3: Enlace en misma pestaña

Enlace que no abre en nueva pestaña: Fundación Querer

Ejemplo 4: Enlace con clase personalizada

Enlace con clase CSS adicional: Onda Cero - David del Cura

Ejemplo 5: Múltiples enlaces en párrafo

Este es un párrafo con múltiples enlaces externos. Puedes visitar El fin de la INERCIA para leer el ensayo completo, o seguir a Javier en Twitter y LinkedIn . También puedes escuchar entrevistas en Onda Cero .

Ejemplo 6: Lista de enlaces

• El fin de la INERCIA - Sitio web del ensayo
• Amazon - Comprar el libro
• Fundación Querer - Organización benéfica
• Onda Cero - Programa de radio

Características implementadas

• ✅ target="_blank" por defecto (configurable)
• ✅ rel="noopener noreferrer" para seguridad
• ✅ Icono de enlace externo (opcional)
• ✅ Estilos del design system (Tech Blue)
• ✅ Hover effects con transiciones suaves
• ✅ Animación del icono en hover
• ✅ Focus states visibles para accesibilidad
• ✅ ARIA label descriptivo
• ✅ Clase CSS personalizable
• ✅ Analytics tracking opcional
• ✅ Responsive design
• ✅ Dark mode ready

Estados interactivos

Uso del componente

<ExternalLink 
  href="https://elfindelainercia.com" 
  text="El fin de la INERCIA" 
/>

<!-- Sin icono -->
<ExternalLink 
  href="https://example.com" 
  text="Enlace sin icono"
  icon=
/>

<!-- Misma pestaña -->
<ExternalLink 
  href="https://example.com" 
  text="Misma pestaña"
  newTab=
/>

<!-- Con clase personalizada -->
<ExternalLink 
  href="https://example.com" 
  text="Enlace destacado"
  className="text-lg font-bold"
/>