August and all, we'll be building the search component.
So basically, the search feature will be implemented inside that house.
Before that, we need to make a fire inside the components folder.
So that file would be inside the components.
It will be searched dot.
So.
First on.
And here we will import boilerplate code so that it will be our at sea and using an extension.
Very cool.
Very helpful.
So this is the basic boilerplate code for this search component.
So the very first thing is is our dev and start this Davila first thing which will do is we'll import
the search icon.
So let me go to material way and get this search.
You can let me just tell you this, and I will search for this search for me to search for the search
icon.
The search, search, search.
This is it.
Bill, copy this, and we will paste it inside the.
Like this import and the search icon is has been successfully imported.
No, what we'll do is we'll import that.
They will use this, so we will copy this.
Copy and inside this we will make use of this will be stirred.
And this is the search icon.
Next, we'll be having an input field which is responsible for taking the input, like where the user
will be typing the
order to this search with the user type in the keywords, basically.
So we'll create an input field.
So that'll be input and.
That will be taxed.
And let me just.
Grab this inside the door just to see if it's working, so let me just.
Or import?
Search from.
Component clash search.
But after the federal research, though, it will be served and done, and we say this a resounding
yes, it is.
Oh, let us go to the browser.
All you can see.
We got the search icon and we got the input field, which is responsible for taking the input.
So let us now go ahead and stay out of this search like the entire search component.
So the very first thing is I need to get sorted out here so that I'll give let me go here inside the
search and here I will give like good press.
So that will have a value which will be in spring training basically, and we will right here, so it's
you.
And two darts, and we'll save it now, we will go to the next two seasons, start styling the search
component.
So.
That will be.
First of all, we'll have to give the class names to the device, so the first day which is here, so
we'll give it a class name of sorts.
And.
Glass animals.
Search and another one search icons we can give to the.
This item.
What's going to?
Search.
Icons and hideous inequality, not an iPhone will just save it and will go to the inn next door to see
us.
Now, the very first thing that we'll do is we'll style this search component, so we'll ride this search
class here.
Search inside of this will be giving the filing CSIS properties the very first thing that did display
flags.
They're going to make use of the display, flex, the Flexbox, so we'll make use of this.
And next will be aligning the items to Central High Line items to send and be to give a background color
to it.
It is we are IDB, and all the values will be seen.
All of them.
And we'll say it now when I go here and go to the browser.
And I see so you can see there is a little bit of styling.
Things have come in order that previously they were not in order, they were like one after another,
but now they are in one line.
And so we can see they are looking good.
Yeah.
That's it.
Next, we'll give some more styling to it.
Let's go back.
And sort of this will give someone was telling.
After the background color, we'll give some border radius to make it round, so.
Border radius there should be of 10 pixels.
And after that, they should be operating.
Which your five pixels?
Now, let me see how that looks.
Looks like.
Better than before.
Oh, and all those who come here.
After this, I will give some margin quantum.
1.5 idioms.
Said it.
We come here.
That looks pretty good.
Right now, what we'll do is we'll give some more styling.
Next, we'll.
If the starting to the input like this, this and things idea inside the surge, they've.
Will you give the class name as search and then input so that the input field so we will give as search
and then input and the of this will give people the.
Border as none, that looks not good, that doesn't look good.
So next, we'll be giving the background color.
That will be our job, of course, and the two two, three, two three two three.
And next will be.
Giving it away with.
With a 100 percent, 100 percent.
We save it now then and go back to the browser.
You can see that looks like pretty good better than before.
There's no outline and also I will disable this outline also, and I'm clicking on this horsewomen outline.
I will display this also colors to that.
I'm here inside the CSAs file, so here what I'll do is search, input and then focus.
But.
Input.
And then like for concert.
Inside this, I will disable the outline of the outline, but will not save it and when angled back
now.
Yeah.
Now, when I click this and Auckland, it looks really, really beautiful.
So that is the magic of CSO's, basically.
So now what will do?
I think we're done for the search component.
So now it will do what we do is we will go further and we create another component of the node component.
What is the problem?
Let me see why it's not giving the proper building.
This is a body.
Ford.
Who?
I tend.
It is because of this app.
Because we are not given any class in this fight here as a body and full.
OK, never mind.
We will do that further.
But what we are going to do next is we are going to create the north component.
Or the creator, we'll see which one we must go first.
Or as you can see here.
Inside of this, we have done two things right now that we have done, but we have done and what we
have done now, Will, who will do like any one of them to create or place to either not anyone or barter.
I think we need to display it or probably will do that only to making one.
OK, so we'll do it the next.