Okay, let's next work on improving our catalog page that we're currently looking at.
It doesn't look great at the moment, so let's go and adjust that.
And currently we've got this unordered list.
Things are going to change now.
So let's go and add a couple more components inside the catalog folder.
Let's create a new file called Product Lists.
And we'll create another new component.
And this is going to be for a product card dot TSX.
And let's start with the product list.
Let's use the RFC snippet to create the functional component.
And we'll go to our catalog.
And we're going to take the unordered list.
And I'm going to cut this and I'm going to paste it into the product list.
So no styling changes yet.
I'm just really shuffling code at this point.
But we do need to pass the products down to our products list, and we'll do that the same way that
we did before.
We're going to create a type called props, specify products, and that's going to be a type of product
array.
And inside the products list.
We'll destructure the products and give it the type of props and pass in products into the curly brackets.
And then we'll go back to the catalog and in place of our product list, or in place of the unordered
list, I should say we're going to have our products list, and we're going to pass down the products
to that component.
And literally nothing has changed.
We'll still be able to refresh our page.
Everything has stayed the same.
So let's now go to our product card component.
And we'll use the snippet again to create this.
And we're going to pass down an individual product to the product card.
So once again we'll use type props equals open curly brackets.
And this time it's going to be product.
And we're going to pass in or use the type of product there.
And once again we're going to destructure the product and give it the type of props.
And now we can go about the business of styling our product card.
So we're going to use a card from material UI to do this.
So we bring in the card from UI material and inside the card.
This can take properties and we can give our card for example elevation.
And I'll set it to three which makes it appear above the page.
And we'll come back soon to do a bit more styling with this.
We'll just get the elements in place first of all, and we'll use card media, because we'll display
the product image inside the card.
And the card media doesn't need to have children components inside the card media.
So we can just use the or close it off on this line.
And we'll give this some properties.
Now one of the properties we're going to use here is the CSS property.
And this is quite powerful.
This allows us to supply styling classes to our different material UI components.
So I'm going to give this a height, for instance, and I'm going to set it to 240 pixels, and I'm
going to give the background size the styling class, I'm going to set it to cover.
So this means it's going to cover the full amount of its available space.
We can also supply the image.
And this is going to be the product dot picture URL.
And we'll give it a title and set it to product dot name.
And below the card media we're going to have our card content.
And this does take children.
So we'll add its closing tag.
And then we'll have typography.
And we'll use Gutter Bottom to give it some margin at the bottom.
And we'll give it a variant of subtitle two.
And once again we'll use that property to give it some styling classes and say s equals and double curly
brackets.
And we're going to give this a color.
And we can use material theme colors for this and we will stick to using material theme colors, because
we're going to introduce a dark mode and a light mode and material.
When the mode changes, will automatically set the appropriate color for the theme color that we're
choosing here.
So I'm going to go for secondary domain.
That's how we specify that we want to use the secondary theme color from material UI in here.
And inside the typography.
This is going to be the product dot name.
And below this typography we're going to have another typography element.
And we're going to give this some properties as well.
And we'll give it a variant of H6.
We'll give it the SE property so we can supply some styling classes.
And we'll give it a color of secondary.
In fact this is the one I wanted to be secondary main not the one above.
So let's just change what we're doing in here.
What I wanted for the product name was to make it uppercase.
So we're going to use text transform.
And we're going to set this to uppercase.
And the secondary main is going to go in this next typography.
And inside here we're going to set we'll have a dollar.
And then we'll open curly brackets and then parentheses.
And this is going to be the products dot price.
And we want to divide this by 100.
So we use the forward slash 100.
And because we want to display this as a currency we're going to say two fixed and specify two decimal
places.
And below the card contents we can have card actions.
And this is where our buttons are going to go.
And we'll give this some styling.
And we'll specify s x equals.
And we want to centralize this.
So we can use justify content and say space between.
Now I'm going to talk about the flex CSS system soon.
But the idea of this is that the children inside card Actions justify content is going to give them
equal distance space between each element inside the card actions.
And we're going to have two buttons.
We want one on the left of the card, one on the right of the card, and the space between setting is
effectively going to mean that one's positioned on the left and one's floated if you like, to the right.
So we're going to have a button inside here and say add to cart.
And I'll just copy this button down and we'll just use this button to view the details of the product.
So let's go back to our catalog component now.
And I'm going to do something different with this button.
I don't want it inside the catalog component.
So I'm just going to cut it from here and move it into the app dot TSX.
And I'm going to position it below for the time being of the title.
And I'm just going to use the update import to bring in the button into the app dot TSX.
And in the catalog component.
We don't need the ad products added in there.
So I can remove that from here.
And let's just clean things up in here.
So let's remove the import for the button.
So we've got a catalog and that's displaying the product list.
So inside the product list we want to display our product cards.
So instead of this unordered list we're going to have a box.
We're going to use box from movie material.
Now this box is really just like a div that allows us to use the SE property or other styling classes
inside.
This particular component is very useful.
We'll use it quite often, but it's really just like a div in many ways, and it allows us to apply
styling classes, use the SE property that we've used before, and let's take a look at how we're going
to use this.
So I'm going to specify SE because that's available to us here.
And then we can use the display flex.
And I will talk about display, flex and the flexbox system in CSS soon.
But for now we're just going to lay out what we need, and we're going to give it the flex wrap property.
Which means that because we're going to have well, we've got 18 products and they're not all going
to fit on one line.
We need them to wrap around.
So we'll use flex wrap and specify wrap.
We'll give it a gap of three.
And this is not pixels.
This is a spacing which the default is set to eight pixels.
So a gap of three means it's effectively going to be 24 pixels gap between them.
And we're going to say justify content and specify center.
And then inside the loop instead of this list item, we're going to display our product card.
And we're going to pass down the products.
And we might as well change the name of item to product here instead of item, and then just pass down
the product to the product card, and we've still got a warning or something going on in the app.tsx.
And that's because of the ad products, which we no longer need to pass down to the catalog component.
And if we go and take a look at our progress, then not quite what I'm looking for.
Obviously we're missing the images, but we do have product cards, but they're not equal size.
We've got five up here, we've got six here, we've got six here.
So that's definitely not the look that I'm going for.
But we can see the beginnings of what we're going for here.
So let's just go back and give this a bit more styling.
And we need to sort out the heading and the button there as well and centralise that.
But let's go back to our product card.
Because the card itself, we didn't give it any styling properties.
So let's suggest that we'll use the SE property again and we'll add a few things inside here we're going
to set the width of the cards.
And we're going to set it to 200 or 280.
And we're going to give it a border radius of two.
Because the cards typically are material design, two are square.
I'd prefer them to be a bit rounded.
We'll use display and set.
Flex will have a flex direction of column so that the cards go or the contents go across.
And we'll use justify and add a comma and justify.
And we're going to say space between.
And if we go and take a look at what this has done for us, now we can see that our cards are nicely
uniform.
We're still missing the images of course.
We'll sort that out very soon.
And I just want to get the heading centralized above here as well, just in the short term.
So everything looks as it is supposed to.
So let's go and adjust the heading which is in the app dot TSX.
And we'll use the box again just so that we can use Display Flex on.
And I'm going to need to add the quick fix and update the import there.
So we'll take the typography and the button and paste them inside here.
And with this box component we can use the SE property again if we want.
But because the box is kind of a styling utility component, we can also specify display and flex directly
inside here.
Now the default behavior of display flex is that the children will be displayed in a row.
So these should be appearing side by side if I go and take a look.
And that is the case.
But we'd also like to centralize these as well.
So we can use justify content and specify center.
And this should move them over to the center.
And great.
But we could do with some gap between them.
So we can specify gap.
And I'm going to say three.
And if we go and take a look we can see that they're now separated from each other.
And we can also use margin bottom.
Or let's use margin y for above and below margin.
And I'll set that to three as well.
And if we go take a look.
Well that's a bit more like it.
But we're still missing the images.
So let's go and add these now.
And if we go to the course assets folder and we open the course assets we've got an images folder.
Just copy this into your clipboard in its entirety.
Head back to VSCode and inside the public folder in the client folder just right click.
And if you're on a mac, reveal in Finder or Reveal in Windows Explorer.
If you're on windows and just right click and paste the images inside there.
And what we should have is the images.
And we've got a list of our products and all of the different products have images.
And if we go back to our browser and we refresh the page now, we can see that the product images are
displayed here as well.
So without too much effort, we've now got presentable looking product cards.
And we should still have the add product functionality.
And sure we do.
I'm not seeing the image there for some reason, but this is not functionality that is going to remain.
But we can add products, albeit without images.
And the way that the flexbox lays them out is like so.
We'll probably change this to a grid system because that gives us a bit more control and flexbox, but
that's pretty okay.
So great.
Now we've got our product cards.
And before we do move forward I just want to open up the console, Chrome DevTools, make sure there's
no errors because I can see that there is an error inside here.
I just want to refresh the page and see if that persists.
And sure, we know what this problem is.
We've seen it before.
Each item in a list inside react needs to have a unique key.
So let's just go back to the product list and give our product cards the key property and set it to
product.id.
That should resolve that warning.
And if I just refresh the page again, great.
Now the warning has gone.
But I do want to point out what it says here.
Download the react DevTools for a better experience.
We're going to take a look at that next.