Pular para o conteúdo
Astro Astro

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é

  1. Crie um novo arquivo em src/components/Rodape.astro.

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

    src/components/Rodape.astro
    ---
    const plataforma = "github";
    const nomeUsuario = "withastro";
    ---
    

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

Importe e utilize Rodape.astro

  1. Adicione a seguinte declaração de importação ao frontmatter em cada uma de suas três páginas Astro (index.astro, sobre.astro e blog.astro):

    import Rodape from '../components/Rodape.astro';

  2. Adicione um novo componente <Rodape /> 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.

        <Rodape />
      </body>
    </html>

  3. 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:

src/pages/index.astro
---
import Navegacao from '../components/Navegacao.astro';
import Rodape from '../components/Rodape.astro';
import '../styles/global.css';


const tituloPagina = '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>{tituloPagina}</title>
  </head>
  <body>
    <Navegacao />
    <h1>{tituloPagina}</h1>
    <Rodape />
  </body>
</html>

Crie um componente de Rede Social

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.

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

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

    src/components/Social.astro
    ---
    const { plataforma, nomeUsuario } = Astro.props;
    ---
    <a href={`https://www.${plataforma}.com/${nomeUsuario}`}>{plataforma}</a>

Importe e utilize Social.astro em seu Rodapé

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

    src/components/Rodape.astro
    ---
    const plataforma = "github";
    const nomeUsuario = "withastro";
    import Social from './Social.astro';
    ---
    

    <footer>
      <p>Aprenda mais sobre meus projetos em <a href={`https://www.${plataforma}.com/${nomeUsuario}`}>{plataforma}</a>!</p>
      <Social plataforma="twitter" nomeUsuario="astrodotbuild" />
      <Social plataforma="github" nomeUsuario="withastro" />
      <Social plataforma="youtube" nomeUsuario="astrodotbuild" />
    </footer>

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

Estilize seu Componente de Rede Social

  1. Customize a aparência dos seus links adicionando uma tag <style> em src/components/Social.astro.

    src/components/Social.astro
    ---
    const { plataforma, nomeUsuario } = Astro.props;
    ---
    <a href={`https://www.${plataforma}.com/${nomeUsuario}`}>{plataforma}</a>
    

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

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

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

    <footer>
      <Social plataforma="twitter" nomeUsuario="astrodotbuild" />
      <Social plataforma="github" nomeUsuario="withastro" />
      <Social plataforma="youtube" nomeUsuario="astrodotbuild" />
    </footer>

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

Teste você mesmo

  1. Que linha de código você precisa escrever no frontmatter de um componente Astro para receber valores de titulo, autor e data como props?

  2. Como você passa valores como props para um componente Astro?

Checklist

Recursos