All right.
And now let's work on the CSS.
And if you notice, the wrapper is actually coming from stats container.
So like I said, we'll use the same logic in the stats page and basically in the admin page we're just
borrowing this wrapper.
So first let's set up the wrapper for stats container.
Again, something we'll use a little bit later in the stats page and then we'll work on the stat item
and then I'll show you how we can access the props in a styled component.
So first of all, let's navigate to assets.
We're looking for rappers and more specifically, we're looking for stats Container.
Let's remove everything.
And basically I just want to set up a grid layout.
So we're going to go here with display grid.
We're going to set up row gap equals to two rems because on a small screen, of course, we're going
to have only one column layout.
And then let's right away set up a media query and we're going to go with min width.
Let's set it equal to 768 pixels.
And in here, let's go with grid template.
Columns and let's set it equal to one fraction and one fraction.
Now, as far as the column gap, we're going to go here with one REM and then let's copy and paste.
And effectively we want to change this to 1120.
And as far as the values.
Let's set it equal to one fraction, one fraction and one fraction.
So three column layout.
And since the value for the column gap is going to be exactly the same, I can just remove this line
of code.
Then let's navigate to a start item and in here we'll have more values.
And I can tell you right away that if we want to access the props that we're passing in the styled component,
notice this stat item returns a wrapper, which is a styled component.
And in here we provide those props if we want to access them.
When we're writing the code.
Essentially we need to look for a function.
So we go here with interpolation functionality where we set up the dollar sign and then the curly braces.
Again, this is typical for template strings in JavaScript, so this is technically nothing unique,
but styled components are just using it.
And essentially in here we'll have a function and we'll be able to access the props.
So all of the props.
Now in our case, we're looking for color and background.
Why?
Because that's what we're passing here in the start item.
Remember, these are the props we're setting up and of course we can access it when we're setting up
the CSS.
So same deal.
Let me just remove everything.
And one by one, let's set it up.
For starters, we're going to go here with padding all around.
Let's set it equal to two rems.
Then we want to go with the background color.
So background is equal to.
And in this case, we're going to go with CSS variable.
The value will be background hyphen.
Secondary hyphen and then color.
That's the value that I picked over here.
And then basically I want to set up the color as the border color.
More specifically the border bottom.
For that, we're going to go here with five pixels solid.
And again, instead of hard coding, I'm going to go with interpolation.
Then I'll provide here a function.
In there I can access the props and I'll just return props dot and then the color, because again,
that's my prop name.
And as a result, whatever color we pass in is going to be set up as the border bottom.
Then we want to go with the header.
We'll just go with display flex.
Line items in the center.
So let's set it equal to center, then justify content.
It's going to be equal to space between and then let's start working on those classes.
Remember, we have three of them.
We have count title as well as the icon.
So let's start here with count.
We want to go with display block.
After that we want to go with font weight.
And let's set it equal to 700.
When we want to increase the font size and I'm going to set it equal to 50 pixels.
And then when it comes to color, well, again, we'll have to do these acrobatics.
And therefore, in order to speed this up, I'm just going to copy and paste.
So I'll set it equal to color.
And again, I'm accessing the color prop, then line height will increase and we're going to go here
with line height equals to two.
Then let's work on that title.
Let's start here with the margin and let's set it equal to zero.
Then text transform.
We're going to set it equal to capitalize.
After that, let's go with letter spacing and let's set it equal to our CSS variable.
So letter.
Spacing and then we want to go with text align and let's set it equal to left.
After that, we want to go with margin top 0.5 RPMs.
So let's create a little bit of margin on the top.
And then let's go with font size.
And let's set it equal to 1.25 Rems.
And then lastly, let's style that icon.
So essentially, this is going to be the span where the icon is going to be located.
We're going to go with the width.
We'll set it equal to 70 pixels.
Then height is also going to be equal to some kind of pixel value in my case, 60.
And then we want to do the same logic over here.
We just want to access the background color.
So we'll go here with background.
That's the property.
Copy and paste.
But instead of.
Color.
We're going to go with Bxg.
Then let's set up the semicolon.
After that, we want to go with border radius.
So let's go with border radius.
That one will be equal to our variable in this case.
Radius.
Okay, good.
And then we have display flex since we want to place everything in the center again, since we have
the span with the icon.
So align items is also going to be equal to center and justify content is going to be equal to center.
So justify.
Content equals to center.
And then lastly, let's style the actual icon in order to access it.
We're going to go with SVG.
We want to increase the font size and we'll set it equal to two Rems and then color.
Same deal.
We'll use this logic over here.
Let me save it.
Let me navigate back to my browser.
Let's submit.
And if everything is correct, we should see the same result.
And with this in place, we can start working on the next step.