3 • Build and design with Astro UI components

Create a social media footer

Get ready to…

  • Create a Footer component
  • Create and pass props to a Social Media component

Now that you have used Astro components on a page, let’s use a component within another component!

Section titled Create a Footer Component

  1. Create a new file at the location src/components/Footer.astro.

  2. Copy the following code into your new file, Footer.astro.

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    ---
    

    <footer>
      <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>

Import and use Footer.astro

Section titled Import and use Footer.astro

  1. Add the following import statement to the frontmatter in each of your three Astro pages (index.astro, about.astro, and blog.astro):

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

  2. Add a new <Footer /> component in your Astro template on each page, just before the closing </body> tag to display your footer at the bottom of the page.

        <Footer />
      </body>
    </html>

  3. In your browser preview, check that you can see your new footer text on each page.

Try it yourself - Personalize your footer

Section titled Try it yourself - Personalize your footer

Customize your footer to display multiple social networks (e.g. Instagram, Twitter, LinkedIn) and include your username to link directly to your own profile.

Code Check-In

Section titled Code Check-In

If you’ve been following along with each step in the tutorial, your index.astro file should look like this:

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


const pageTitle = 'Home Page';
---


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

Create a Social Media component

Section titled Create a Social Media component

Since you might have multiple online accounts you can link to, you can make a single, reusable component and display it multiple times. Each time, you will pass it different properties (props) to use: the online platform and your username there.

  1. Create a new file at the location src/components/Social.astro.

  2. Copy the following code into your new file, Social.astro.

    src/components/Social.astro
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
Section titled Import and use Social.astro in your Footer

  1. Change the code in src/components/Footer.astro to import, then use this new component three times, passing different component attributes as props each time:

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

    <footer>
      <p>Learn more about my projects on <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. Check your browser preview, and you should see your new footer displaying links to these three platforms on each page.

Style your Social Media Component

Section titled Style your Social Media Component

  1. Customize the appearance of your links by adding a <style> tag to 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. Add a <style> tag to src/components/Footer.astro to improve the layout of its contents.

    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. Check your browser preview again and confirm that each page shows an updated footer.

Test Yourself

Section titled Test Yourself

  1. What line of code do you need to write in an Astro component’s frontmatter to receive values of title, author, and date as props?

  2. How do you pass values as props to an Astro component?

Checklist

Section titled Checklist

Resources

Section titled Resources