So now we will give these darling to our bottom component, but let us go to the next door, see us
file.
Now let me tell you, this will be the only file which will be responsible for all the global success
across the application.
We are not going to like, make separate or dedicated systems files for every other component because
it's not as huge and so complex project that we should do that.
Of course you can do it, and that's a very, very good practice.
If you are creating a little big application, which is a little bit complex with like more than five
components, if it has more than five components or even five components, you should definitely go
and create like dedicated CIUSSS files for them, like the like, they could just separate styling to
them inside of the components.
For that, you can do that and then import it inside the main component.
That is the very simple thing, and it's a very good practice and you should do it now.
Coming to our application, we will be doing that inside the next door to see a ceasefire.
And right now, you can see that it's completely empty.
And let me minimize the.
Yeah, now here we'll start styling our button component.
No.
Let me do that because this is the button and this does does not need any court, this is like native
or default name.
We we'll give it to the button on the side of this will be given.
And that will be in hex code, that will be if.
The if.
Yeah, we have we have.
Like a white collar.
We'll be having a one size.
That will be off point it IDM.
Next will be having like water, we don't want any water that should be none.
We save it.
And when we check if there is something happening here.
And it became too small.
Doing what he will give, some would do it.
But here or there is none.
What Radius will go?
And that will be of three audio.
And will give the modern and that will be off point tourism.
OK.
Next, we'll be having the background.
Just the background and the background color, and here will be will be giving the color, so that will
be zero e.
It'll be fun.
Be.
Would be the school.
And let me save and see if there is at least something.
It is it is what that's too small, we'll give it like size.
Let's go back here.
Let me get something to it, like the minimum with some men, with just the minimum men with simply
means the minimum bid that will be of 80 pixels.
OK.
Let me save it and see if there is any changes.
Are.
And I warned the council to the point that whenever I like bring my closer to it, they should change
to point.
So let me do it.
First.
Point.
There certainly is a bit.
And.
Is like nail biting them, but this is not we won't actually go on a different thing.
For now, we cleared some more crises like the button, but a not so.
Thebarton rapper.
So here we will be hitting the button.
But to put it inside of this, that will be a display of flags.
And after that, that will be the line items.
We'll be aligning the items to this end to basically.
Benton and justifying the content to senator.
OK.
And we'll be giving the padding as.
Two audio.
Tourism.
And we have to see it.
And all I can see that is happening, not there, because this class is being created somewhere else,
not inside the bottom component, but that is the active class name actually so.
Or that?
Like this, this is where this pattern will be imported and wrapped around.
So right now, we have just imported inside the U.S., but that is not how we will import.
That will be a different way of using context and all.
So right now, we are just giving the CSIS that perspective of how will imported.
So let me get that.
Joe Barton.
But Apple.
Barton.
The.
And instead of that.
That will be a color.
And that will be seen.
We'll see, you will see.
Not always easy to see.
Yeah.
This will be declared next that it will be a background color.
Background color.
And that will be seen.
The thing we have you no, we have not ruled that, will we see nine?
And CC A.
Similar to white and grayish color, we'll be having a border of one pixel border.
One pixel solid.
Remember, the model bought a solid.
And then we have the other 060 see this one right here.
That's completely fine, because.
It doesn't matter much.
This looks something like this, you see.
This one.
Completely fine.
And I say it, and of course, this will not be rendered on the browser.
Now, you know, the reason why I'm doing this, not only because I we will be creating the active status
to the button inside the context, and that time we don't need to come back again and.
Style buttons again and again.
So that is why I am doing it right now.
Now let me just show you a guide to which you'll be using to get the lake effect of.
React like the countdown timer, because we'll be using this hazard that we show you.
You basically get this this you will be using this package from npm.
So you can see here this is the package reducing the so-called reject countdown timer published two
months ago.
And you can see the downloads are like.
OK.
So you can see this is how this works.
This is all we will be looking at the data, and you can install it by just one simple command.
That is npm install the account countdown timer.
OK.
So this is the this is the command.
So let me see their documentation.
There's the basic usage, like the colors and all all of that you can get from here.
There's just no like extra styling from the SS for this, and the styling is done here only like basically
the colors and all, you'd be done here only.
You can see that are many, many options and many, many designs, which you can choose.
So what you can do is you can just copy this particular command from here by clicking on this and you
can see the copy to clipboard message will pop up.
And now you can just come here.
And opening up the terminal.
And they're always running.
Let me open the door.
Then you need to go to the project folder where your project is there, so for me, it's project and
then this.
You can check it also by the Alaskan mine.
Now what you will do is you will base that particular command, which you copied from there and you
can see this and PM.
I, for instance, you can write, install or you can write what will do the same job.
So install the get countdown timer.
And that's it.
So once you hit enter, it will install this package on your project.
Now I have only done this, so I know to like, do that again.
It will just take like two to three seconds, or maybe just five seconds.
And that will be installed.
And you can see that is like not too much.
Over your tester, only to give me.
So there's not like so bulky package.
So that is what just install this and then we will do the next of the things and we will meet in the
next review where we'll be making use of this particular like we have done on timer and we'll be implementing
that to our project for.
This is like a very easy thing to do, but you need to understand like the basics and on how to configure
it and how to use that in our website.
Otherwise that could have been done using the in Dallas could.
The package hasn't made our work.
So what do you think we'll see in the next video?