All right, so now let's start working on the stats container.
And effectively we just want to showcase three cards with the values of pending interview and the client.
And this one should look very, very familiar because we already use the wrapper for stats container
as well as the stat item in the admin page.
So let's just navigate back to jog our memory.
So notice here.
We were grabbing users and jobs from use loader data and then in the wrapper, one by one we placed
the stat item.
And when it comes to the stat item component, it's looking for these properties and the setup in the
stats container is going to be.
Almost the same.
The only difference will set up an array by the name of stat and will iterate over and for every item
we will set up a stat item.
And yes, it's going to be pretty much in the same wrapper.
So now let's navigate back to the Readme.
We want to grab the imports over here.
So effectively since the stat item is looking for the icon, that's why I imported some icons wrapper
the stats container as well as the stat item.
Let's grab this.
Then in here, let's copy and paste.
Remember, we are grabbing the default stats prop.
Correct.
So let's right away the structure it default stats and like I said in here.
Effectively all hardcode the array.
And then we'll iterate over and then display.
Now the only dynamic value is actually going to be the pending one, the interview or decline.
So how is that going to look like?
I'm going to go with stats.
It's an array.
It's an array of objects, to be more precise.
And let's come up with some values.
So first of all, in here, I'm going to say pending applications.
Now we want to pass in that dynamic value, so I'm going to go with count and that one is equal to default
stats.
And remember, I said that I always like to have the checks on the server as well as the front end.
So here I'll go with optional chaining just in case there's no value and I'll say no, I'm missing a
dot over here.
And then I'll say, You know what?
If there is nothing, then just go with zero.
That way again, we don't have any bugs then icon.
I'll go with the rolling one over here.
Let me close it.
Let me add a comma here, by the way, it's missing.
Then when it comes to color, essentially.
I just want to provide these values.
So notice we'll use one color for the background of the icon and then the other color of is going to
be used for the numbers and also the border in the bottom.
And as far as the first value, we want to set it equal to a string.
And then I'm going to go with F59.
An E0B, I believe, and then comma, and then let's go with BG.
And for this one, we're going to go with hashtag and then f f.
And 3C7.
Let me save it.
I'm going to set up the rest of them in a second.
I just want to see whether everything works, and therefore I'm going to go with the wrapper.
And then like I said, I'm going to navigate over or I'm sorry, I'm going to iterate over the stats
one.
The array I just created.
I'm going to go with map and in my callback function I'm going to reference each and every object,
which at the moment is only one item.
And then from the map, I want to return a stat item.
Then key is going to be equal to item dot title since I don't have the ID over here and then I just
want to pass all of the properties so I'll spread them out.
And if everything is correct, if we navigate here, notice now I have one value for pending applications
and basically it's the same deal.
I just want to navigate back over here and add rest of them.
So let me copy and paste.
Over here as well.
And then we just want to change some values around.
So second one is going to be interviews scheduled as far as the title.
Count is going to be equal to an interview.
Then the icon.
I'm going to go with the calendar check.
And as far as the color and background color, this one will be hashtag 647.
And ACB.
And when it comes to a background one, we want to go here with E, zero, E eight and then F nine.
And lastly, let's work on the declined.
So we're going to go with jobs declined.
Instead of pending.
We'll go with declined.
Now this will be a bug.
The color.
Let's go with hashtag D66.
A6A, I believe, and then f, f, and then for each f, f one, two, three, four.
Let's save this.
Let's navigate to a browser.
And if everything is correct, this is what we should see on the screen.
Now, one last thing before we start working on the charts container.
I'm noticing that for the start item, I don't have the rounded edges.
Basically there should be a border radius, but it looks like I skipped it when I was setting up the
CSS.
So if you're interested, you can navigate to assets, then rappers, then stat item, and then somewhere
here at the top.
Basically add a property by the name of border radius.
And let's set it equal to var and then hyphen hyphen border.
Radius.
Let's save it.
And if everything is correct, notice we have the nice rounded edges as well.
And with this in place, we're done with the stats container.
And now we can start working on the charts.
Container.