1
00:00:00,390 --> 00:00:02,520
August and all, we'll be building the search component.

2
00:00:02,660 --> 00:00:06,740
So basically, the search feature will be implemented inside that house.

3
00:00:06,750 --> 00:00:11,600
Before that, we need to make a fire inside the components folder.

4
00:00:11,610 --> 00:00:15,530
So that file would be inside the components.

5
00:00:15,540 --> 00:00:18,060
It will be searched dot.

6
00:00:19,620 --> 00:00:20,040
So.

7
00:00:21,730 --> 00:00:22,480
First on.

8
00:00:23,650 --> 00:00:32,590
And here we will import boilerplate code so that it will be our at sea and using an extension.

9
00:00:33,250 --> 00:00:33,850
Very cool.

10
00:00:33,850 --> 00:00:34,510
Very helpful.

11
00:00:34,630 --> 00:00:37,930
So this is the basic boilerplate code for this search component.

12
00:00:38,500 --> 00:00:46,330
So the very first thing is is our dev and start this Davila first thing which will do is we'll import

13
00:00:46,330 --> 00:00:47,530
the search icon.

14
00:00:47,530 --> 00:00:51,880
So let me go to material way and get this search.

15
00:00:52,320 --> 00:00:59,560
You can let me just tell you this, and I will search for this search for me to search for the search

16
00:00:59,560 --> 00:00:59,950
icon.

17
00:01:00,910 --> 00:01:02,710
The search, search, search.

18
00:01:03,130 --> 00:01:03,630
This is it.

19
00:01:06,130 --> 00:01:11,410
Bill, copy this, and we will paste it inside the.

20
00:01:12,710 --> 00:01:20,540
Like this import and the search icon is has been successfully imported.

21
00:01:21,050 --> 00:01:23,990
No, what we'll do is we'll import that.

22
00:01:24,380 --> 00:01:26,660
They will use this, so we will copy this.

23
00:01:29,040 --> 00:01:34,800
Copy and inside this we will make use of this will be stirred.

24
00:01:36,270 --> 00:01:37,860
And this is the search icon.

25
00:01:38,310 --> 00:01:44,640
Next, we'll be having an input field which is responsible for taking the input, like where the user

26
00:01:44,640 --> 00:01:45,780
will be typing the

27
00:01:48,880 --> 00:01:53,130
order to this search with the user type in the keywords, basically.

28
00:01:53,820 --> 00:01:55,440
So we'll create an input field.

29
00:01:55,680 --> 00:01:58,410
So that'll be input and.

30
00:02:00,130 --> 00:02:01,300
That will be taxed.

31
00:02:01,420 --> 00:02:03,050
And let me just.

32
00:02:04,320 --> 00:02:10,110
Grab this inside the door just to see if it's working, so let me just.

33
00:02:12,430 --> 00:02:13,450
Or import?

34
00:02:15,760 --> 00:02:18,190
Search from.

35
00:02:19,580 --> 00:02:22,520
Component clash search.

36
00:02:23,420 --> 00:02:32,270
But after the federal research, though, it will be served and done, and we say this a resounding

37
00:02:32,570 --> 00:02:33,770
yes, it is.

38
00:02:34,460 --> 00:02:36,110
Oh, let us go to the browser.

39
00:02:38,210 --> 00:02:39,140
All you can see.

40
00:02:40,390 --> 00:02:46,400
We got the search icon and we got the input field, which is responsible for taking the input.

41
00:02:46,420 --> 00:02:50,800
So let us now go ahead and stay out of this search like the entire search component.

42
00:02:51,640 --> 00:02:59,350
So the very first thing is I need to get sorted out here so that I'll give let me go here inside the

43
00:02:59,350 --> 00:03:02,050
search and here I will give like good press.

44
00:03:05,280 --> 00:03:12,670
So that will have a value which will be in spring training basically, and we will right here, so it's

45
00:03:12,720 --> 00:03:12,930
you.

46
00:03:14,920 --> 00:03:22,360
And two darts, and we'll save it now, we will go to the next two seasons, start styling the search

47
00:03:22,360 --> 00:03:22,810
component.

48
00:03:23,970 --> 00:03:24,450
So.

49
00:03:26,250 --> 00:03:27,330
That will be.

50
00:03:28,620 --> 00:03:34,770
First of all, we'll have to give the class names to the device, so the first day which is here, so

51
00:03:34,770 --> 00:03:37,470
we'll give it a class name of sorts.

52
00:03:40,950 --> 00:03:41,580
And.

53
00:03:43,380 --> 00:03:44,640
Glass animals.

54
00:03:48,050 --> 00:03:54,170
Search and another one search icons we can give to the.

55
00:03:55,630 --> 00:03:56,680
This item.

56
00:03:59,900 --> 00:04:01,700
What's going to?

57
00:04:04,310 --> 00:04:05,010
Search.

58
00:04:06,600 --> 00:04:13,020
Icons and hideous inequality, not an iPhone will just save it and will go to the inn next door to see

59
00:04:13,020 --> 00:04:13,320
us.

60
00:04:15,180 --> 00:04:21,420
Now, the very first thing that we'll do is we'll style this search component, so we'll ride this search

61
00:04:21,420 --> 00:04:22,230
class here.

62
00:04:23,840 --> 00:04:32,170
Search inside of this will be giving the filing CSIS properties the very first thing that did display

63
00:04:32,180 --> 00:04:32,660
flags.

64
00:04:34,100 --> 00:04:39,410
They're going to make use of the display, flex, the Flexbox, so we'll make use of this.

65
00:04:40,160 --> 00:04:49,580
And next will be aligning the items to Central High Line items to send and be to give a background color

66
00:04:49,580 --> 00:04:49,970
to it.

67
00:04:52,650 --> 00:04:56,910
It is we are IDB, and all the values will be seen.

68
00:04:59,560 --> 00:05:00,130
All of them.

69
00:05:01,210 --> 00:05:08,680
And we'll say it now when I go here and go to the browser.

70
00:05:09,690 --> 00:05:14,820
And I see so you can see there is a little bit of styling.

71
00:05:15,030 --> 00:05:21,330
Things have come in order that previously they were not in order, they were like one after another,

72
00:05:21,330 --> 00:05:22,830
but now they are in one line.

73
00:05:23,370 --> 00:05:26,220
And so we can see they are looking good.

74
00:05:26,930 --> 00:05:27,150
Yeah.

75
00:05:29,360 --> 00:05:29,720
That's it.

76
00:05:30,270 --> 00:05:32,480
Next, we'll give some more styling to it.

77
00:05:34,460 --> 00:05:35,510
Let's go back.

78
00:05:38,400 --> 00:05:40,560
And sort of this will give someone was telling.

79
00:05:42,540 --> 00:05:47,340
After the background color, we'll give some border radius to make it round, so.

80
00:05:49,590 --> 00:05:52,950
Border radius there should be of 10 pixels.

81
00:05:54,660 --> 00:05:56,940
And after that, they should be operating.

82
00:05:59,850 --> 00:06:01,320
Which your five pixels?

83
00:06:04,200 --> 00:06:06,030
Now, let me see how that looks.

84
00:06:09,420 --> 00:06:10,470
Looks like.

85
00:06:11,600 --> 00:06:12,440
Better than before.

86
00:06:13,510 --> 00:06:15,130
Oh, and all those who come here.

87
00:06:16,620 --> 00:06:22,410
After this, I will give some margin quantum.

88
00:06:26,880 --> 00:06:28,170
1.5 idioms.

89
00:06:31,890 --> 00:06:32,340
Said it.

90
00:06:36,380 --> 00:06:37,130
We come here.

91
00:06:38,710 --> 00:06:39,700
That looks pretty good.

92
00:06:42,470 --> 00:06:46,170
Right now, what we'll do is we'll give some more styling.

93
00:06:46,960 --> 00:06:48,530
Next, we'll.

94
00:06:49,790 --> 00:06:57,320
If the starting to the input like this, this and things idea inside the surge, they've.

95
00:07:01,450 --> 00:07:08,710
Will you give the class name as search and then input so that the input field so we will give as search

96
00:07:08,710 --> 00:07:13,960
and then input and the of this will give people the.

97
00:07:15,370 --> 00:07:19,720
Border as none, that looks not good, that doesn't look good.

98
00:07:21,040 --> 00:07:23,410
So next, we'll be giving the background color.

99
00:07:25,800 --> 00:07:34,110
That will be our job, of course, and the two two, three, two three two three.

100
00:07:35,320 --> 00:07:37,030
And next will be.

101
00:07:37,970 --> 00:07:39,350
Giving it away with.

102
00:07:41,020 --> 00:07:43,870
With a 100 percent, 100 percent.

103
00:07:45,350 --> 00:07:48,740
We save it now then and go back to the browser.

104
00:07:54,400 --> 00:07:58,240
You can see that looks like pretty good better than before.

105
00:07:58,960 --> 00:08:05,620
There's no outline and also I will disable this outline also, and I'm clicking on this horsewomen outline.

106
00:08:05,620 --> 00:08:08,530
I will display this also colors to that.

107
00:08:10,380 --> 00:08:15,990
I'm here inside the CSAs file, so here what I'll do is search, input and then focus.

108
00:08:17,410 --> 00:08:17,920
But.

109
00:08:18,800 --> 00:08:19,470
Input.

110
00:08:20,000 --> 00:08:22,280
And then like for concert.

111
00:08:25,730 --> 00:08:34,880
Inside this, I will disable the outline of the outline, but will not save it and when angled back

112
00:08:34,880 --> 00:08:35,210
now.

113
00:08:39,970 --> 00:08:40,240
Yeah.

114
00:08:41,130 --> 00:08:45,120
Now, when I click this and Auckland, it looks really, really beautiful.

115
00:08:45,360 --> 00:08:47,820
So that is the magic of CSO's, basically.

116
00:08:48,780 --> 00:08:50,190
So now what will do?

117
00:08:51,240 --> 00:08:53,610
I think we're done for the search component.

118
00:08:54,570 --> 00:09:03,510
So now it will do what we do is we will go further and we create another component of the node component.

119
00:09:04,460 --> 00:09:06,280
What is the problem?

120
00:09:06,990 --> 00:09:10,290
Let me see why it's not giving the proper building.

121
00:09:11,530 --> 00:09:13,630
This is a body.

122
00:09:15,010 --> 00:09:15,460
Ford.

123
00:09:16,420 --> 00:09:17,050
Who?

124
00:09:18,310 --> 00:09:19,330
I tend.

125
00:09:20,490 --> 00:09:22,670
It is because of this app.

126
00:09:23,650 --> 00:09:30,940
Because we are not given any class in this fight here as a body and full.

127
00:09:32,600 --> 00:09:33,490
OK, never mind.

128
00:09:34,080 --> 00:09:35,510
We will do that further.

129
00:09:35,540 --> 00:09:39,740
But what we are going to do next is we are going to create the north component.

130
00:09:42,280 --> 00:09:46,360
Or the creator, we'll see which one we must go first.

131
00:09:46,840 --> 00:09:48,700
Or as you can see here.

132
00:09:49,980 --> 00:09:55,770
Inside of this, we have done two things right now that we have done, but we have done and what we

133
00:09:55,770 --> 00:10:04,410
have done now, Will, who will do like any one of them to create or place to either not anyone or barter.

134
00:10:05,170 --> 00:10:09,780
I think we need to display it or probably will do that only to making one.

135
00:10:10,380 --> 00:10:12,590
OK, so we'll do it the next.