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

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

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:

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

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.

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

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:

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

Customize the appearance of your links by adding a <style> tag to 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>

Add a <style> tag to src/components/Footer.astro to improve the layout of its contents.

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

Check your browser preview again and confirm that each page shows an updated footer.

Test Yourself

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?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />
How do you pass values as props to an Astro component?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />

Checklist

I can create new .astro components in src/components/
I can import and use Astro components inside other Astro components.
I can pass props to an Astro component.

Resources

Component Props in Astro

Create a social media footer

Create a Footer Component

Import and use `Footer.astro`

Try it yourself - Personalize your footer

Code Check-In

Import and use `Social.astro` in your Footer

Test Yourself

Checklist

Resources

Create a social media footer

Create a Footer Component

Import and use Footer.astro

Try it yourself - Personalize your footer

Code Check-In

Create a Social Media component

Import and use Social.astro in your Footer

Style your Social Media Component

Test Yourself

Checklist

Resources

Import and use `Footer.astro`

Import and use `Social.astro` in your Footer