Original subtitles

So let's work on this button in the header

and we could add all the JSX code in here.

I will create a separate component for this, though.

Again, you could do the same for the image here, by the way,

but I will leave the image in here, actually,

since that's not a lot of JSX code,

but I will create a separate component

for the HeaderCartButton.

So, HeaderCartButton.js is my file name here.

And we could create that component

in the header JS file, as well,

since we're only going to use it in that file

but I wanna keep that file lean and not bloated,

therefore, I will follow this common convention

of creating a separate file.

We will also need some styling and for this, attached,

you find a HeaderCartButton.module.css file

which you can simply copy into your layout folder

and this includes some styles for this button.

And then in the JS file for the HeaderCartButton

I will add my HeaderCartButton function,

my component function, which receives props.

And, of course, also export it

like this and then let's work on

the JSX code for the button.

For this, here, I wanna return a button, of course,

and inside of that button

I now wanna have an icon, then some text

and then a little badge

with the current number of items in the cart.

Therefore, I will add three spans in there.

The first one will wrap the icon, the second one the text

and the third one the batch.

And when it comes to this icon,

I also got a finished component for you which you can use

and that's the CartIcon JS file,

which you could add to the layout folder

because that's where we use it so this would make sense,

but what you can also add to the cart folder

because, of course, it is a icon specifically for the cart.

And whilst in this application

we will only use it in the HeaderCartButton.

You could be using it in other parts of the app as well

and therefore you might want to

store it in the feature folder,

in the cart folder instead of the layout folder,

but that is totally up to you.

Either way, this attached CartIcon JS file

simply holds an SVG icon, and not much more,

and you can use that to WellRender this CartIcon.

So, therefore, here back in the HeaderCartButton JS file

I simply wanna import CartIcon from going up one level

Cart/CartIcon.

So, I import it as a regular component

because it is our regular functional component.

And then, here in this span, I will add CartIcon like this,

as a self-closing component.

So, it's a regular React component even though it holds SVG

because that is something you can do in React.

You can use SVG code in your JSX code, as well.

Now, in the second span I will have a text of Your Cart.

And in the third span I wanna output

the total amount of items in the cart.

And, for the moment, we don't have the logic

for accounting this yet so, therefore,

here for the moment I will just hard-code it,

let's say, free, as a dummy value.

Now we will need some styles so, therefore,

here I will import classes from the

HeaderCartButton.module.css file

and then on the button itself we can add a class

which should be classes.button.

Then, on that span with the icon

I will add a class of classes.icon

and, of course, these again, button, icon and so on.

These, again, are just predefined CSS classes

in that CSS file.

And for the badge we, therefore, add classes.badge.

If we do that, we can now use this HeaderCartButton

in the header JS file.

Here, I wanna replace this button with it

so, therefore, I will simply import HeaderCartButton

from "./HeaderCartButton"; like this.

And then here, simply add HeaderCartButton.

And now, if you save everything you should have a button

that looks like this in your header.

If it doesn't look like this, definitely download

and compare my code snapshot

because, well, this is all just JSX

and CSS working together right now.

So, you should definitely have a output like this.

The button, of course, doesn't do anything yet

but that is something we will add throughout this module.

But for the moment we, therefore, are done with that header.

We added this header, it's finished now

and now we can work on the next parts of this application.