Pular para o conteúdo

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é

Seção intitulada 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

Seção intitulada 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é

Seção intitulada 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ção intitulada 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 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

Seção intitulada 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é

Seção intitulada 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

Seção intitulada 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

Seção intitulada 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

Seção intitulada Checklist

Recursos

Seção intitulada Recursos
Contribua

O que passa em sua cabeça?

Criar uma Issue no GitHub

A maneira mais rápida de alertar nosso time sobre um problema.

Comunidade