Crie um rodapé de redes sociais

Se prepare para...

Criar um componente de Rodapé
Criar e passar props para um componente de Rede Social

Agora que você utilizou componentes Astro em uma página, é hora de utilizar um componente dentro de outro componente!

Crie um componente de Rodapé

Crie um novo arquivo em src/components/Footer.astro.

Copie o seguinte código em seu novo arquivo, Footer.astro.

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

<footer>
  <p>Aprenda mais sobre meus projetos em <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
</footer>

Importe e utilize `Footer.astro`

Adicione a seguinte declaração de importação ao frontmatter em cada uma de suas três páginas Astro (index.astro, about.astro e blog.astro):
```
import Footer from '../components/Footer.astro';
```
Adicione um novo componente <Footer /> no seu template Astro em cada página, logo antes da tag de fechamento </body> para mostrar seu rodapé no fim da sua página.
```
    <Footer />
  </body>
</html>
```
Na pré-visualização do seu navegador, verifique que você pode ver seu novo texto de rodapé em cada página.

Tente você mesmo - Personalize seu rodapé

Customize seu rodapé para mostrar múltiplas redes sociais (e.x. Instagram, Twitter, LinkedIn) e inclua seu nome de usuário para fazer um link diretamente ao seu perfil.

Check In de Código

Se você estiver seguindo durante cada etapa do tutorial, seu arquivo index.astro deve se parecer assim:

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

const pageTitle = 'Página Inicial';
---

<html lang="pt-BR">
  <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>

Já que você pode ter múltiplas contas online no qual você queira adicionar links para, você pode fazer um único componente reutilizável e mostrá-lo múltiplas vezes. Cada vez, você irá passá-lo diferentes propriedades (props) para utilizar: a plataforma online e seu nome de usuário nela.

Crie um novo arquivo em src/components/Social.astro.

Copie o seguinte código em seu novo arquivo, Social.astro.

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

Importe e utilize `Social.astro` em seu Rodapé

Modifique o código em src/components/Footer.astro para importar, e então utilizar este novo componente três vezes, passando diferentes atributos do componente como props a cada vez:

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

<footer>
  <p>Aprenda mais sobre meus projetos em <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>

Verifique a pré-visualização do seu navegador, e você deve ver seu novo rodapé mostrando links para essas três plataformas em cada página.

Customize a aparência dos seus links adicionando uma tag <style> em 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>

Adicione uma tag <style> em src/components/Footer.astro para melhorar a disposição de seus conteúdos.

---
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>

Verifique a pré-visualização do seu navegador novamente e confirme que cada página mostra um rodapé atualizado.

Teste você mesmo

Que linha de código você precisa escrever no frontmatter de um componente Astro para receber valores de titulo, autor e data como props?
1. const { titulo, autor, data } = Astro.props;
2. import PostBlog from '../components/PostBlog.astro'
3. <PostBlog title="Minha Primeira Postagem" autor="Dan" data="12 Ago 2022" />
Como você passa valores como props para um componente Astro?
1. const { titulo, autor, data } = Astro.props;
2. import PostBlog from '../components/PostBlog.astro'
3. <PostBlog titulo="Minha Primeira Postagem" autor="Dan" data="12 Ago 2022" />

Checklist

Eu posso criar novos componentes .astro em src/components/
Eu posso importar e utilizar componentes Astro dentro de outros componentes Astro.
Eu posso passar props para um componente Astro.

Recursos

Props do Componente no Astro