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!

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

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.

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>

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

  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.

  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?

Contribua Comunidade Sponsor