Skip to content

Crie um rodapé de redes sociais

Get ready to…

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

Section titled Crie um componente de Rodapé

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

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

    src/components/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

Section titled Importe e utilize Footer.astro

  1. 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';

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

  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é

Section titled 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.

Conferência de Código

Section titled Conferência 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 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>

Crie um componente de Rede Social

Section titled 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 { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

Importe e utilize Social.astro em seu Rodapé

Section titled Importe e utilize Social.astro em seu Rodapé

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

    src/components/Footer.astro
    ---
    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>

  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

Section titled 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 { 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>

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

    src/components/Footer.astro
    ---
    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>

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

Teste você mesmo

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

Section titled Checklist

Recursos

Section titled Recursos
Contribute Community Sponsor