Beautiful, and once we have the entire structure in place now, let's work on this that container,
as far as the import will look for use of context because we want to grab the stats.
So the object from the state.
We also want to have that item because it read over and sense.
In the cards, you can see the icons most important icons from react icons, more specifically font
awesome one.
And none since I have the styling.
I also get the wrapper from the wrappers and where it starts container.
And in this case, the set up is going to be following where I'll grab the stats from the global state,
but there's going to be a default.
That's all right.
And before we continue, I mean, just say yes, of course you can set it up separately like we did
with links, but I just went this route where I'll have them right here in the stats container.
And effectively the only thing that is going to be dynamic is the count.
So notice here, I'm looking for the stats, the global variable, and I'm looking for the properties
where they're spending, whether that's interview.
And yes, as a precaution, I just out of the or operator where I'll say, if it doesn't exist, which
I mean it should exist because we're sending it from the server as default, right?
So this is an extra precaution when I say, if it doesn't exist, let's add a zero.
And and here we have some kind of title.
I have the icon that I'm using and I also have color and background color, because if you take a look
at the complete application, you'll notice that I'm using here different colors for each of the cards.
And this is going to be the case where I'll showcase how we would do that using the style, the component.
So this is going to be a little bit different than a single job.
Remember when we were setting up the interview showcase quickly that so all the jobs remember when we
were setting this one up, we use the straight up access, meaning we added the class.
Now, in this case, it's going to be a little bit different where you set up the styling using the
styled component.
And this is going to be the only component where I'll copy and paste the most of the stuff because I
really don't see the point of recapping this from scratch as well as the imports.
So let's start over here and don't worry, we're not going to be copying.
Pasting for rest of the project is just I really don't see the point of tapping on this default start.
All right.
So let's go with Stout's container and we already have the status item.
So just overwrite that one and then let's grab the stats from the global one.
So let's go.
It used context.
Let's invoke it, and let's set up that default.
All right.
So our default start, let's copy and paste this one over here, and I'm going to go over the properties
one more time.
So by the way, this is not state should be state where for defending what's going to be the battle.
We're going to look for the stats value depending on if it's not been zero.
And that's the icon that I'm using.
So if you want to go with a different icon or different colors, I mean, just change those values and
you'll be good to go.
Same goes for interiors, as well as the jobs of the.
Now, as far as the return, we'll iterate over our default stats and then for each item, we return
the stats item.
So first, let's change there to a wrapper.
That's where we'll add the styles for the actual container.
And then let's go with our default stats map.
That's iterate over a nine for each item.
We want to grab two things.
I want to grab all the properties that are here in the item, and that's why I'll spread it out on that
item.
And I also want to get the index.
And like I said, it will return a start item the component.
And then remember, if we have a list, we need to pass in the key, say here index and I'll spread
out all of the properties, say or hear the item.
I want to close it.
Let's say that one.
And once we navigate to the browser, it looks like I have a bag over here.
So when I was grading the project, I went with that item.
And then when I was setting up the component, I actually went with that one.
So you know what I think is going to be faster if I just rename this one?
So let me take a look at rename option here.
And instead of stats, I'm going to look for that item.
And now the read me is going to be correct as well as my file restarts container one.
So let me navigate back to the browser.
And what we should see in the screen is three cards in which at the moment just have the adding one.
And now in next video, we'll set up the actual card.