Create a social media footer

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

Now that you have used Astro components on a page, it's time to use a component within another component!

Create a Footer Component

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

Copy the following code into your new file, 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`

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

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

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>
```
In your browser preview, check that you can see your new footer text on each page.

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

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

---



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

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

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

---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

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:

```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
---
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>
```

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

1. Customize the appearance of your links by adding a `