Crea un footer de redes sociales

Prepárate para…

Crea un componente de Footer
Crea y pasa props a un componente de Social Media

Ahora que has usado componentes de Astro en una página, ¡es hora de usar un componente dentro de otro componente!

Crea un nuevo archivo en la ubicación src/components/Footer.astro.

Copia el siguiente código en tu nuevo archivo, Footer.astro.

---
const platform = "github";
const username = "withastro";
---

<footer>
  <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
</footer>

Importa y usa `Footer.astro`

Añade la siguiente declaración de import al frontmatter en cada una de tus tres páginas de Astro (index.astro, about.astro, y blog.astro):
```
import Footer from '../components/Footer.astro';
```
Añade un nuevo componente <Footer /> en tu plantilla de Astro en cada página, justo antes de la etiqueta de cierre </body> para mostrar tu footer en la parte inferior de la página.
```
    <Footer />
  </body>
</html>
```
En la vista previa de tu navegador, verifica que puedas ver el nuevo texto de tu footer en cada página.

Personaliza tu footer para mostrar múltiples redes sociales (ej. Instagram, Twitter, LinkedIn) e incluye tu nombre de usuario para enlazar directamente a tu propio perfil.

Check-In de Código

Si has estado siguiendo cada paso del tutorial, tu archivo index.astro debería verse así:

---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Home Page';
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Ya que puedes tener múltiples cuentas online a las que enlazar, puedes hacer un solo componente reutilizable y mostrarlo múltiples veces. Cada vez, le pasarás diferentes propiedades (props) para usar: la plataforma online y tu nombre de usuario ahí.

Crea un nuevo archivo en la ubicación src/components/Social.astro.

Copia el siguiente código en tu nuevo archivo, Social.astro.

---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

Importa y usa `Social.astro` en tu Footer

Cambia el código en src/components/Footer.astro para importar, luego usar este nuevo componente tres veces, pasando diferentes atributos de componente como props cada vez:

---
const platform = "github";
const username = "withastro";
import Social from './Social.astro';
---

<footer>
  <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

Revisa la vista previa de tu navegador, y deberías ver tu nuevo footer mostrando enlaces a estas tres plataformas en cada página.

Personaliza la apariencia de tus enlaces añadiendo una etiqueta <style> a src/components/Social.astro.

---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

<style>
  a {
    padding: 0.5rem 1rem;
    color: white;
    background-color: #4c1d95;
    text-decoration: none;
  }
</style>

Añade una etiqueta <style> a src/components/Footer.astro para mejorar el layout de sus contenidos.

---
import Social from './Social.astro';
---
<style>
  footer {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }
</style>

<footer>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

Revisa la vista previa de tu navegador de nuevo y confirma que cada página muestra un footer actualizado.

Pon a prueba tu conocimiento

¿Qué línea de código necesitas escribir en el frontmatter de un componente de Astro para recibir valores de title, author, y date como props?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />
¿Cómo pasas valores como props a un componente de Astro?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />

Checklist

Puedo crear nuevos componentes .astro en src/components/
Puedo importar y usar componentes de Astro dentro de otros componentes de Astro.
Puedo pasar props a un componente de Astro.

Recursos

Props de Componentes en Astro

Contribuir Comunidad Patrocinar

Crea un footer de redes sociales

Crea un componente de Footer

Importa y usa Footer.astro

Pruébalo tú mismo - Personaliza tu footer

Check-In de Código

Crea un componente de Social Media

Importa y usa Social.astro en tu Footer

Estiliza tu componente de Social Media

Pon a prueba tu conocimiento

Checklist

Recursos

Importa y usa `Footer.astro`

Importa y usa `Social.astro` en tu Footer