ContextQMD
Back to Withastro

Create a social media footer

src/content/docs/en/tutorial/3-components/2.mdx

latest6.4 KB
Original Source

import Checklist from '/components/Checklist.astro'; import Box from '/components/tutorial/Box.astro'; import MultipleChoice from '/components/tutorial/MultipleChoice.astro'; import Option from '/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

<PreCheck> - Create a Footer component - Create and pass props to a Social Media component </PreCheck>

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

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

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

    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>
</Steps> <Steps> 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';
```

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.

```astro ins={1}
    <Footer />
  </body>
</html>
```

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

<Box icon="puzzle-piece">

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

</Box>

Code Check-In

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

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

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.

<Steps> 1. Create a new file at the location `src/components/Social.astro`.

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

    astro
    ---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
</Steps> <Steps> 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>
```

2. Check your browser preview, and you should see your new footer displaying links to these three platforms on each page. </Steps>

Style your Social Media Component

<Steps> 1. Customize the appearance of your links by adding a `<style>` tag to `src/components/Social.astro`. 
```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
---
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.

```astro title="src/components/Footer.astro" ins={4-10}
---
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. </Steps>

<Box icon="question-mark">

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?

    <MultipleChoice> <Option isCorrect> `const { title, author, date } = Astro.props;` </Option> <Option> `import BlogPost from '../components/BlogPost.astro'` </Option> <Option> `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />` </Option> </MultipleChoice>

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

    <Option> `const { title, author, date } = Astro.props;` </Option> <Option> `import BlogPost from '../components/BlogPost.astro'` </Option> <Option isCorrect> `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />` </Option> </MultipleChoice>
</Box> <Box icon="check-list">

Checklist

<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. </Checklist> </Box>

Resources