1
00:00:00,240 --> 00:00:05,910
So now we'll be creating the component, which would be responsible for showing up data or displaying

2
00:00:05,910 --> 00:00:11,340
the data basically on the screen, and which will also have the button to delete the post, which will

3
00:00:11,340 --> 00:00:16,760
also provide us the ability to delete the post and basically delete all the title and the content.

4
00:00:16,770 --> 00:00:19,620
And you'll have a button to read the post.

5
00:00:20,010 --> 00:00:21,210
So let us create that.

6
00:00:21,540 --> 00:00:26,820
So for that, we have to go to the SHC inside that inside the components folder and the header will

7
00:00:26,820 --> 00:00:27,450
create the.

8
00:00:29,710 --> 00:00:30,280
No.

9
00:00:31,610 --> 00:00:38,390
Don't guess on note, GSX, whatever you can call, will grab the boilerplate code with the extension.

10
00:00:38,410 --> 00:00:45,430
So how do we write to see and hear what will do inside the written?

11
00:00:46,340 --> 00:00:58,940
We'll have an one inside the one that would be the title and inside here we'll have a beta version and

12
00:00:59,150 --> 00:01:01,960
it's not showing me authorization yet, for sure.

13
00:01:02,450 --> 00:01:08,630
Inside the bead, there will be the content right and content.

14
00:01:09,530 --> 00:01:16,010
After that, we'll have a bottom button, basically, and it will certainly.

15
00:01:17,860 --> 00:01:19,060
So we'll see if this.

16
00:01:20,300 --> 00:01:27,500
And that said, basically, or you can just render it inside our app.

17
00:01:28,920 --> 00:01:29,730
After the.

18
00:01:31,060 --> 00:01:32,650
Create ADR will import.

19
00:01:33,830 --> 00:01:37,760
Import note from.

20
00:01:39,470 --> 00:01:42,120
Components splash not.

21
00:01:42,980 --> 00:01:47,510
Yeah, you save it if you see a sideways running, no, it's not.

22
00:01:48,800 --> 00:01:52,190
So we'll start this word with and PM.

23
00:01:53,210 --> 00:01:57,320
Start, this will take a few seconds or till it starts.

24
00:01:58,550 --> 00:02:00,350
Let us grab the note here.

25
00:02:02,050 --> 00:02:02,560
North.

26
00:02:04,080 --> 00:02:06,900
And so on this, I've just saved it.

27
00:02:07,560 --> 00:02:09,540
And this is good.

28
00:02:13,180 --> 00:02:16,780
So I saw what is just about to start.

29
00:02:17,990 --> 00:02:19,240
Yeah, it's up and running.

30
00:02:19,870 --> 00:02:23,230
And now we can go to sort of basically.

31
00:02:24,440 --> 00:02:25,030
And.

32
00:02:26,500 --> 00:02:31,330
Let me show you so this is the title of the contenders are delivered, and although you don't want things

33
00:02:31,330 --> 00:02:35,950
to look like this, this is not any not so beautiful.

34
00:02:37,300 --> 00:02:39,070
Well, that's why we need to give some styling to it.

35
00:02:40,180 --> 00:02:49,090
So for that, we can go to the aid, and the very first thing is let me minimize the terminal and now

36
00:02:49,090 --> 00:02:51,310
we'll give some classes to it.

37
00:02:51,470 --> 00:02:53,470
So inside the boat.

38
00:02:54,040 --> 00:02:56,920
So here will give a class name to this div.

39
00:02:57,580 --> 00:02:58,990
That class name would be not.

40
00:03:00,220 --> 00:03:09,610
Last name and it would be north naught, and we'll see it, so after that, oh, what we'll do is.

41
00:03:11,620 --> 00:03:19,450
We'll go to Stallard Scissors and we'll provide this startling hit, so we'll give a comment that.

42
00:03:21,260 --> 00:03:23,180
Or the North Pole?

43
00:03:24,980 --> 00:03:26,350
Forth and.

44
00:03:29,020 --> 00:03:37,110
Ahead, we'll do we'll get to now will give we'll grab dinner to discuss this particular nerd class

45
00:03:37,650 --> 00:03:38,160
inside.

46
00:03:38,160 --> 00:03:40,680
I feel the gravitas, but will do not.

47
00:03:43,290 --> 00:03:49,820
And there will give our background there that will be of Stark.

48
00:03:50,670 --> 00:03:52,410
And this particular one.

49
00:03:53,280 --> 00:03:55,800
And after that, we'll have a read.

50
00:03:57,570 --> 00:03:59,990
With two hardy pixels.

51
00:04:01,370 --> 00:04:01,610
Yeah.

52
00:04:02,540 --> 00:04:05,600
And after that, we'll have some border radius.

53
00:04:08,250 --> 00:04:16,110
And that will be of seven pixels, basically, so and I save it and I go see if that is something,

54
00:04:16,560 --> 00:04:17,910
of course, that is nothing.

55
00:04:18,720 --> 00:04:22,350
And so what will do will add some water users to it.

56
00:04:22,830 --> 00:04:25,830
So now we'll add the book shadow.

57
00:04:27,010 --> 00:04:36,640
The shadow and that would be zero at the top and two pixels here and five pixels.

58
00:04:37,580 --> 00:04:40,190
And turned out to be like the color.

59
00:04:40,760 --> 00:04:42,710
And that would be one certify.

60
00:04:43,630 --> 00:04:44,720
Uncertainty, fire.

61
00:04:45,640 --> 00:04:51,460
And for the next one, it would be also on seventy five and same for this one also.

62
00:04:52,510 --> 00:04:54,610
Seventy five coal.

63
00:04:55,860 --> 00:04:58,290
So if you save it and show it to you.

64
00:04:58,890 --> 00:04:59,790
I was looking.

65
00:05:00,330 --> 00:05:06,780
When I go back, so you can see that is a little like box and there is a shadow to the box.

66
00:05:07,140 --> 00:05:08,880
That is what we have just created.

67
00:05:09,630 --> 00:05:09,900
OK.

68
00:05:11,770 --> 00:05:19,690
So what we'll do next is when you give up bedding and bedding would be off and pixels.

69
00:05:21,050 --> 00:05:23,390
And next, we will be giving a margin.

70
00:05:27,430 --> 00:05:30,760
The margin would be 16 pixels, pixels.

71
00:05:31,720 --> 00:05:32,350
And.

72
00:05:33,770 --> 00:05:35,210
Let me say what and show it to you.

73
00:05:38,280 --> 00:05:40,530
So that looks a little bit suspicious.

74
00:05:41,070 --> 00:05:43,800
That is a space, a little bit space.

75
00:05:44,220 --> 00:05:51,410
OK, so next we'll provide some more things, so then we'll be giving the floor.

76
00:05:51,900 --> 00:05:55,170
It should be floating to the left of the float left.

77
00:05:55,680 --> 00:05:55,960
Yup.

78
00:05:56,490 --> 00:05:59,760
And there should be margin right on zero margin.

79
00:05:59,760 --> 00:06:00,170
Right?

80
00:06:00,450 --> 00:06:01,790
Should be of zero.

81
00:06:02,430 --> 00:06:03,060
I see it.

82
00:06:03,870 --> 00:06:11,700
And when I see here so that it, it's like floating to the left, the containers falling to the left

83
00:06:12,090 --> 00:06:14,070
and there should be margin of right of zero.

84
00:06:14,370 --> 00:06:16,370
So that is what we have just created, right?

85
00:06:16,860 --> 00:06:19,080
So now what we'll do is a.

86
00:06:20,520 --> 00:06:27,480
We'll give some styling to the H1 and then followed by the beat and then the button will go step by

87
00:06:27,480 --> 00:06:30,090
step, so let us tailor each one tech first.

88
00:06:30,930 --> 00:06:31,950
So we'll go here.

89
00:06:32,830 --> 00:06:36,290
After that here, the sorry.

90
00:06:36,400 --> 00:06:37,300
Sorry, Dot.

91
00:06:38,490 --> 00:06:40,960
Not the notes note and each one.

92
00:06:41,650 --> 00:06:45,010
And inside this, that would be the size.

93
00:06:46,520 --> 00:06:53,870
The foreign size would be off for one idea, and next, we'll be having the margin bottom.

94
00:06:54,990 --> 00:06:57,680
On June bottom of six percent.

95
00:06:58,710 --> 00:07:00,720
Well, yeah, that's so cool.

96
00:07:01,350 --> 00:07:04,500
And let me see how they're looking.

97
00:07:06,020 --> 00:07:08,810
Yeah, that looks a little bit like tiny.

98
00:07:09,560 --> 00:07:13,910
And it was so huge like before, but now it's like looking cool.

99
00:07:14,270 --> 00:07:14,610
OK.

100
00:07:15,170 --> 00:07:17,090
Next, we'll be styling the paragraph, so.

101
00:07:19,070 --> 00:07:19,430
To be.

102
00:07:20,450 --> 00:07:26,360
And inside this will be having a phone size of one IBM.

103
00:07:27,770 --> 00:07:33,050
And next, we'll be having the color and the color will be a hex code.

104
00:07:33,440 --> 00:07:45,500
So I knew what color it is that these six who want to be the standard one like dark red color and.

105
00:07:47,270 --> 00:07:55,880
Basically, will having been have the margin of bottom of 10 pixels, we will save it and we'll call

106
00:07:56,510 --> 00:07:57,890
it, we'll see.

107
00:07:57,890 --> 00:08:00,830
The content is in this colour and that title is in this colour.

108
00:08:01,250 --> 00:08:02,870
OK, we'll style it further.

109
00:08:03,530 --> 00:08:05,600
It does go back and.

110
00:08:07,190 --> 00:08:16,710
Now what we'll do is we'll give our white space now, white space is but even rap rap.

111
00:08:17,430 --> 00:08:19,310
Now let me show you what it does.

112
00:08:20,430 --> 00:08:22,790
OK, right now it is just like that, OK?

113
00:08:23,480 --> 00:08:25,220
And then I called here.

114
00:08:26,300 --> 00:08:27,130
Not here.

115
00:08:29,330 --> 00:08:29,640
OK.

116
00:08:30,020 --> 00:08:33,740
And I come here and I see white space freed up, you can see.

117
00:08:34,760 --> 00:08:37,880
And see, that is that is a little bit of space.

118
00:08:38,900 --> 00:08:40,950
Let me just come in and talk to.

119
00:08:43,860 --> 00:08:44,890
It is like that, OK?

120
00:08:45,440 --> 00:08:52,480
So it shows a little bit spacing, and yeah, so right now we'll do some good work.

121
00:08:52,930 --> 00:08:54,990
So the next thing which will do is the bottom.

122
00:08:55,630 --> 00:08:58,840
So for the partner, we might have to go to materially.

123
00:08:58,840 --> 00:08:59,080
Why?

124
00:08:59,080 --> 00:09:04,840
Actually, because it's always better to have an icon rather than text.

125
00:09:05,230 --> 00:09:05,830
So what?

126
00:09:06,010 --> 00:09:07,390
That's what we are going to do.

127
00:09:07,900 --> 00:09:08,190
OK.

128
00:09:09,300 --> 00:09:12,280
Oh, so for that, let me take you to material Joy.

129
00:09:13,340 --> 00:09:13,730
And.

130
00:09:16,140 --> 00:09:19,950
Inside of here, I come to the order and.

131
00:09:21,070 --> 00:09:21,430
Yeah.

132
00:09:21,970 --> 00:09:24,220
Why this site is not loading properly today.

133
00:09:25,500 --> 00:09:30,290
OK, when I click here and buy for the lead.

134
00:09:31,900 --> 00:09:38,160
There is some issue with the site apparently sure not beat delete.

135
00:09:38,710 --> 00:09:39,820
Yeah, so we'll take this one.

136
00:09:40,150 --> 00:09:45,550
I think this the Oakland one is okay and we just copy this and close it.

137
00:09:46,300 --> 00:09:47,570
Now we will go to.

138
00:09:47,590 --> 00:09:49,810
Now we don't need to start anymore, OK?

139
00:09:50,140 --> 00:09:53,110
And now we'll go back to the previous one.

140
00:09:53,290 --> 00:10:03,250
Let me go to the this here and we'll go to the criteria not to get the idea closer on the count.

141
00:10:03,430 --> 00:10:03,880
The note.

142
00:10:04,810 --> 00:10:13,000
William Porter, portraiture and inside the button, you can also import the pattern from material the

143
00:10:13,000 --> 00:10:13,480
way you know.

144
00:10:14,200 --> 00:10:15,760
And for that, we.

145
00:10:16,900 --> 00:10:20,920
Let me just show you from where you can just grab Thebarton.

146
00:10:26,280 --> 00:10:34,170
When you first of all, let us just give this here, so that will be lead.

147
00:10:35,630 --> 00:10:36,170
The lead.

148
00:10:37,380 --> 00:10:39,840
Out of line icon.

149
00:10:40,820 --> 00:10:41,630
So, yeah.

150
00:10:42,770 --> 00:10:50,690
It's like that and save it, and then I go to the browser and see why it's not trending.

151
00:10:51,020 --> 00:10:51,260
Yeah.

152
00:10:52,130 --> 00:10:53,150
This is the bottom right.

153
00:10:53,300 --> 00:10:53,930
This is the bottom.

154
00:10:54,300 --> 00:10:58,790
And basically, I grab a bite and also on this.

155
00:10:59,360 --> 00:11:08,120
So like the material button that has a different styling that I do and that I think we could have from

156
00:11:08,690 --> 00:11:10,640
bit off.

157
00:11:11,760 --> 00:11:13,440
You are basically.

158
00:11:15,000 --> 00:11:18,330
Let me see if that works in court.

159
00:11:20,070 --> 00:11:21,180
Done gone.

160
00:11:25,290 --> 00:11:26,610
The I.

161
00:11:27,840 --> 00:11:30,120
And we with material, I guess they should work.

162
00:11:31,040 --> 00:11:33,470
And I put it in like peak once.

163
00:11:36,550 --> 00:11:37,960
So save it.

164
00:11:38,290 --> 00:11:39,280
I don't know if it's work.

165
00:11:39,760 --> 00:11:40,780
It's going to work or not.

166
00:11:44,750 --> 00:11:46,160
See, and could the best.

167
00:11:49,870 --> 00:11:53,180
Just not looking at what is taking too long.

168
00:11:53,200 --> 00:11:54,870
Maybe you can find.

169
00:11:55,330 --> 00:11:56,080
Oh, sure.

170
00:11:56,220 --> 00:11:59,850
So in compiling bill for.

171
00:12:01,040 --> 00:12:01,520
The problem?

172
00:12:03,520 --> 00:12:08,080
Look, I don't know what's what is happening this, but there's a lot to do in this.

173
00:12:08,170 --> 00:12:13,150
Right now, we want to add some functionality, also some dynamic state also or we have a lot of time

174
00:12:13,150 --> 00:12:14,470
for this node component.

175
00:12:14,470 --> 00:12:16,900
So that will do in the next video in like properly.