OK, so now let's start styling our search component.
So like right now, we have just given the functionality and the JavaScript and the Hawks and all.
But now let's start building it.
So how it will look and everything like that, so let me just start rolling it.
So we will give the class name first to this particular device and.
That will be relative coalition will be relative basically and small, and this is the.
Margin left, basically, no, the 48, these are the predefined values you can go ahead and check on
the official recommendation.
And that is what actually I'm doing, so I'm trying to explain as much as possible.
So and inside of here.
So after the media on one, there is a small and that would be empty.
And.
Of the 10.
Learned tactics is often and another one for three.
So next, we will give the input field inside of this particular due to input and type would be taxed.
And that would be of value, and that is obviously a class name to make it look a little bit better.
So there's the class name, and here we will give the class name so small.
And.
This is coming from the daily wouldn't us as basically
ninety six.
So this is how you are going to create this now this this model and with its 96 and again, there is
the 80 with so rich of often and there is an underdog they've grown, which which is of great color.
They're dark and big.
That means the background gray and of 200.
So something like this.
Next, we have our border.
Border, and that is is, of course, sound good and full, and there will be a shadow shadow wall and
an outline will be no outline would be in.
Yeah.
There will be six.
I think basically putting next black.
And whenever I hover over the component, the search input component, so that it will be a shadow.
So shadow.
Large.
So this is it.
Next, we will have a placeholder after this, so please hold it, and this should be equal to search
Google or Typekit or.
Sir.
Google or type you are?
So I can even give the magnifying glass.
Emoji here that would look even more cool, and then we'll have a button.
And so what are we going here?
Like, before the button, we will have an on change here, so let me give an on change also to this
thing.
Well known gene function like whenever there is a change on change and this is equal to basically this
will be JavaScript and inside of this, there would be I don't think there were two curly braces.
There is only one.
And this is the event.
This will be said text and start of this, there would be dark or event start targeted toward value.
So this is it.
So after this, we will have the.
Barton, so but there will be a JavaScript, so how you want that button to be displayed, so if text
actually cool to this and and person is inside of this, that would be the condition.
So let's give it this and here there would be the item.
So the button would be here.
OK, so button needs including tech, of course, and there is the access inside this.
Because we're not close it.
Basically, you want to empty it?
OK, so next to nothing, nothing else.
OK, next.
There will be the type of Thebarton, so type is bottom.
Next, we'll have the class name wars and the class name would be the tailwind success tank.
So absolute.
And that is a top of 1.5.
And then we'll write a hyphen 1.5 next.
That is a write off for write off four.
And there's a text of two excel to excel and text.
Color should be green.
Text and green five hundred.
And that is an on click after this.
So on, like whenever we click this button, what should happen?
So on clicking the button, we will score or we will like, set next to nothing.
So this is a very narrow function and in line for our total function to set next.
And there should be equal to an empty string.
So that is so good.
Next, let me import links also.
So that we can give links to.
Not this link.
But right now, we are not willing or not important the links will do that, but not no later on.
So that is it for the basic structure of this particular search component.
Next, we'll move on to creating some more components, like for better known.
So we'll see it, which is the one which we want to create.
So I think we should go for links.
Yeah, we should go for links, basically, because after the search, there comes the links, so we
will create the links now.
So let me just create a component inside this.
We see what first.
And inside of this.
That would be.
Inside the components that will be a file.
As.
Oh, OK.
All those links.
My system is a little bit lagging.
And Link starts.
And after the link.
Oh, I don't know why my system is a bit lagging, but when you got to it, OK?
So.
Is it working?
Became a little bit time.
So here will make the basic imports or we use the extension to the east of the acrylic snippets while
press control shift B and then I put certain I'll do the AH AFC.
And after doing this, after doing this, we will import the nav link from the the outer dome and start
of this, that it will be a nav and link.
Basically, we're importing this from the EU to act now grooved on.
OK, so next what we'll do is we'll define our links or we have imported the links and now we will define
the links and there's content and links is equal to an array, basically an area inside this that will
be the you ordered.
And this, you are told, is basically the search.
So did you and then we'll have a coma and then we'll be having a text go inside this.
There would be a more for magnifying glass again.
We are making use of the same emoji.
So this and there would be for all like when we want to search for.
All right.
So this is an object.
Next, we will have another one.
Same as this.
Oh, that will be the new order.
And there will be the news and there will be a comma and text, what should be the text and there should
be news.
So let me find if I have the news emoji.
News.
Do I have.
And working with.
Great working.
OK, let me search news.
OK, I got that day right.
Yeah, I got the emoji.
And that should be in the calibers is actually not clearly better than the Coalition's.
Yeah.
So this is the news.
And next, we will have for the images.
So let us do it also quickly.
And images, and we'll have that text and there will be for the images now, for the images, I will
use the camera.
Images and we just can't find.
A camera?
OK, I got the camera.
And now this would be it.
Now there will be images.
Next, we will have the very same thing for the videos.
And that is for the.
Videos and I will give a comma and the text, which I want to display.
And let me first grab the emoji, and that will be the video.
And for that, I will use maybe this would be good.
Yeah.
So that will be.
Videos.
OK, now let us give some functionality to it, and OK, so there are links and that there, Dave.
Let us quickly give a class name for it.
So class name and the class name would be a flex and that is in small justify around.
And so basically the supply around and then we'll have the justify between.
So this is the space between basically mystify and between.
And then we'll have the items to the center and then we'll have the top as the margin drop, as default.
So next, we'll be having the map mapping function.
We'll be mapping the links or links, dot the map.
And inside of this, there is a function.
And inside of that, there are some arguments.
So you are that we are passing and we are passing the text.
Cool, cool, cool.
So do outside of this, there is.
Federal function and instead of this that are basically the rate on which you want to give.
So inside this, we will give the enabling nav link and to basically where we want to redirect it.
So that's the other.
Next, we'll have the active occurred, the last name and that is basically equal to the text should
be blue and that that's of seven and the intensity and next level with the border and border basically
be two.
So next, we have the dark text or text, and that is deep blue, so blue and three hundred and density.
And the border also would be blue.
Border should be blue.
And that is also that is of basically 700.
And there's the ring bottom of two.
So that is it.
I think the naval ink needs to be, uh, everything needs to be closed, so I wouldn't close it here.
And yeah, and there will be the text or direct text.
And I think we are done for this.
We will save it.
And that's it.
We will create some other functionalities in the next video.
So some other components that will be good in the next video.