1
00:00:01,140 --> 00:00:03,180
‫So as I just mentioned,

2
00:00:03,180 --> 00:00:05,370
‫let's now learn about a better way

3
00:00:05,370 --> 00:00:08,160
‫of reusing styles in Tailwind,

4
00:00:08,160 --> 00:00:09,900
‫which is by using

5
00:00:09,900 --> 00:00:13,983
‫or by actually creating new React components.

6
00:00:15,540 --> 00:00:19,290
‫So what we want to reuse now is all

7
00:00:19,290 --> 00:00:21,480
‫of this style right here.

8
00:00:21,480 --> 00:00:24,000
‫So the style for this button.

9
00:00:24,000 --> 00:00:25,740
‫And so what we're gonna do

10
00:00:25,740 --> 00:00:29,220
‫is to just create a new React component.

11
00:00:29,220 --> 00:00:31,863
‫So let's grab all of this right here,

12
00:00:32,970 --> 00:00:37,380
‫and then here, in the generic components folder,

13
00:00:37,380 --> 00:00:41,433
‫let's create Button.jsx.

14
00:00:42,600 --> 00:00:44,493
‫And using again our snippet.

15
00:00:45,900 --> 00:00:46,733
‫And here,

16
00:00:48,090 --> 00:00:51,963
‫as always, we need to then take in the children.

17
00:00:52,980 --> 00:00:57,660
‫So all the elements that will be passed into this

18
00:00:57,660 --> 00:00:59,250
‫button element.

19
00:00:59,250 --> 00:01:03,273
‫And then here we simply return a button with this class.

20
00:01:04,800 --> 00:01:05,970
‫All right.

21
00:01:05,970 --> 00:01:08,310
‫Now, to make this really reusable,

22
00:01:08,310 --> 00:01:11,220
‫we also need to accept the disabled prop,

23
00:01:11,220 --> 00:01:14,403
‫and then also place that on the button.

24
00:01:16,920 --> 00:01:20,280
‫So let's do that, disabled.

25
00:01:20,280 --> 00:01:21,840
‫And then here,

26
00:01:21,840 --> 00:01:26,823
‫let's say disabled=disabled.

27
00:01:28,320 --> 00:01:31,950
‫Okay. And that should actually be it.

28
00:01:31,950 --> 00:01:35,880
‫So here we should be able to just replace this button

29
00:01:35,880 --> 00:01:38,580
‫with the one that we just created,

30
00:01:38,580 --> 00:01:41,913
‫but of course, without this last name here.

31
00:01:42,822 --> 00:01:44,883
‫And here, that's Button.

32
00:01:45,720 --> 00:01:49,560
‫And there we go. It looks exactly the same.

33
00:01:49,560 --> 00:01:52,980
‫And so we can now, back on our homepage,

34
00:01:52,980 --> 00:01:54,660
‫reuse the same button here,

35
00:01:54,660 --> 00:01:57,450
‫because once we start typing something here,

36
00:01:57,450 --> 00:02:01,050
‫then this button will appear where we can then click,

37
00:02:01,050 --> 00:02:04,023
‫and it will take us to the main page.

38
00:02:05,970 --> 00:02:08,163
‫So let's close maybe this one here.

39
00:02:10,680 --> 00:02:12,693
‫So that is at CreateUser.

40
00:02:13,770 --> 00:02:15,540
‫So here we have this button,

41
00:02:15,540 --> 00:02:18,180
‫and so we can just replace that now

42
00:02:18,180 --> 00:02:21,363
‫with that button that we just created.

43
00:02:23,160 --> 00:02:24,750
‫Beautiful.

44
00:02:24,750 --> 00:02:26,400
‫Now, this is not perfect yet,

45
00:02:26,400 --> 00:02:28,563
‫so this needs a bit more styling.

46
00:02:29,460 --> 00:02:32,160
‫And here we can now actually reuse

47
00:02:32,160 --> 00:02:34,833
‫that input class that we already have.

48
00:02:36,870 --> 00:02:40,830
‫So in the previous lecture, remember, we created this input,

49
00:02:40,830 --> 00:02:43,980
‫and so we can now add that right here.

50
00:02:43,980 --> 00:02:48,780
‫And so we now get exactly the same style that we had before.

51
00:02:48,780 --> 00:02:51,720
‫And in this case, the advantage is that,

52
00:02:51,720 --> 00:02:53,790
‫now, onto this class,

53
00:02:53,790 --> 00:02:56,700
‫so onto all the styles that we already have here,

54
00:02:56,700 --> 00:02:59,190
‫we can now keep adding on more.

55
00:02:59,190 --> 00:03:01,410
‫So here, besides all of these,

56
00:03:01,410 --> 00:03:04,080
‫we now also added this width,

57
00:03:04,080 --> 00:03:07,380
‫and we can even add a margin to the bottom,

58
00:03:07,380 --> 00:03:09,690
‫of eight, for example,

59
00:03:09,690 --> 00:03:13,290
‫so to create this distance right there.

60
00:03:13,290 --> 00:03:16,350
‫And so this is another good use case

61
00:03:16,350 --> 00:03:18,960
‫of actually using the @apply directive

62
00:03:18,960 --> 00:03:21,240
‫that we used in the previous lecture.

63
00:03:21,240 --> 00:03:23,430
‫So whenever you are in a situation

64
00:03:23,430 --> 00:03:25,050
‫where you actually need to add

65
00:03:25,050 --> 00:03:28,470
‫a lot more other classes in some situations.

66
00:03:28,470 --> 00:03:30,300
‫So that's the case right here.

67
00:03:30,300 --> 00:03:32,670
‫And so here again, we were able to use

68
00:03:32,670 --> 00:03:35,670
‫all the styles here from the input class,

69
00:03:35,670 --> 00:03:38,880
‫but then add these two on top.

70
00:03:38,880 --> 00:03:39,713
‫Right?

71
00:03:41,850 --> 00:03:44,490
‫So again, back to the button here,

72
00:03:44,490 --> 00:03:48,120
‫we just were able to reuse all these styles here

73
00:03:48,120 --> 00:03:50,970
‫just by creating this new button component,

74
00:03:50,970 --> 00:03:54,090
‫which now encapsulates all these styles.

75
00:03:54,090 --> 00:03:56,190
‫And so whenever you are using Tailwind

76
00:03:56,190 --> 00:03:58,830
‫in some framework that has components,

77
00:03:58,830 --> 00:04:01,110
‫this is what you should do.

78
00:04:01,110 --> 00:04:05,880
‫I just noticed that maybe here some styling is a bit off,

79
00:04:05,880 --> 00:04:09,360
‫so actually let's add a little bit more padding

80
00:04:09,360 --> 00:04:12,240
‫once the page is a bit bigger.

81
00:04:12,240 --> 00:04:15,390
‫So maybe here in the media query,

82
00:04:15,390 --> 00:04:18,900
‫let's do padding here, six,

83
00:04:18,900 --> 00:04:20,220
‫and

84
00:04:20,220 --> 00:04:21,570
‫padding Y

85
00:04:21,570 --> 00:04:23,013
‫to four.

86
00:04:24,690 --> 00:04:28,500
‫Or actually right, after the small media query,

87
00:04:28,500 --> 00:04:30,363
‫otherwise we cannot really see it.

88
00:04:31,740 --> 00:04:33,030
‫Okay?

89
00:04:33,030 --> 00:04:34,170
‫Nice.

90
00:04:34,170 --> 00:04:39,170
‫And now, let's also reuse this link that we have right here.

91
00:04:39,930 --> 00:04:43,320
‫So we have this link in the cart,

92
00:04:43,320 --> 00:04:47,220
‫so we can close this one, and also this one for now,

93
00:04:47,220 --> 00:04:49,830
‫and this one as well.

94
00:04:49,830 --> 00:04:54,690
‫So let's open up the cart where we have this link here.

95
00:04:54,690 --> 00:04:59,690
‫And then also in the error, we have a similar-looking link,

96
00:04:59,790 --> 00:05:02,730
‫even though here it is actually a button.

97
00:05:02,730 --> 00:05:04,083
‫So if I tried this,

98
00:05:05,070 --> 00:05:08,250
‫then here we have something that looks very similar,

99
00:05:08,250 --> 00:05:11,640
‫and so we also want to reuse that style.

100
00:05:11,640 --> 00:05:14,760
‫And so let's create another button.

101
00:05:14,760 --> 00:05:17,583
‫This one will be a bit more complex.

102
00:05:19,200 --> 00:05:20,380
‫So let's call it

103
00:05:21,570 --> 00:05:23,065
‫a

104
00:05:23,065 --> 00:05:23,982
‫LinkButton,

105
00:05:27,930 --> 00:05:29,670
‫just like this.

106
00:05:29,670 --> 00:05:33,540
‫And again, it needs to receive the children,

107
00:05:33,540 --> 00:05:34,770
‫and also

108
00:05:34,770 --> 00:05:36,510
‫the to prop.

109
00:05:36,510 --> 00:05:40,383
‫So similar to the one that we paste in here.

110
00:05:41,760 --> 00:05:43,350
‫All right.

111
00:05:43,350 --> 00:05:46,410
‫So let's just grab all of this,

112
00:05:46,410 --> 00:05:48,420
‫because what we want to return

113
00:05:48,420 --> 00:05:49,763
‫from this LinkButton is usually this link.

114
00:05:54,168 --> 00:05:56,246
‫So let's do this.

115
00:05:56,246 --> 00:06:01,106
‫And then, of course, we need to import that link right here.

116
00:06:01,106 --> 00:06:04,023
‫And then here we need the children.

117
00:06:05,550 --> 00:06:07,713
‫And then to close that link.

118
00:06:08,640 --> 00:06:13,473
‫All right. And here we now want to dynamically set the to.

119
00:06:14,490 --> 00:06:15,810
‫So to

120
00:06:15,810 --> 00:06:16,643
‫this to.

121
00:06:17,700 --> 00:06:19,260
‫Okay.

122
00:06:19,260 --> 00:06:23,163
‫And so, let's now use that here in the cart instead of this.

123
00:06:25,828 --> 00:06:26,995
‫So LinkButton.

124
00:06:31,200 --> 00:06:33,100
‫And with this, we can get rid

125
00:06:34,170 --> 00:06:35,970
‫of that.

126
00:06:35,970 --> 00:06:37,203
‫Let's just reload.

127
00:06:38,460 --> 00:06:41,820
‫And that works just the same.

128
00:06:41,820 --> 00:06:42,723
‫Beautiful.

129
00:06:44,070 --> 00:06:47,940
‫But now, what about this error here?

130
00:06:47,940 --> 00:06:51,270
‫So we want to use the exact same thing right here,

131
00:06:51,270 --> 00:06:52,863
‫but here we have a button.

132
00:06:53,700 --> 00:06:56,880
‫Well, let's do some trick here.

133
00:06:56,880 --> 00:07:00,400
‫Let's still use the LinkButton that we just created

134
00:07:02,430 --> 00:07:04,170
‫with this text

135
00:07:04,170 --> 00:07:05,793
‫right here.

136
00:07:07,260 --> 00:07:09,300
‫But then, as the to prop,

137
00:07:09,300 --> 00:07:10,780
‫let's pass in

138
00:07:12,150 --> 00:07:14,670
‫just -1 as a string.

139
00:07:14,670 --> 00:07:17,850
‫And then, inside this LinkButton component,

140
00:07:17,850 --> 00:07:22,560
‫we can check whether this is the to prop that we received.

141
00:07:22,560 --> 00:07:26,283
‫And if so, what we want to return is this button.

142
00:07:28,320 --> 00:07:32,880
‫All right. So we abstract again all that logic right here.

143
00:07:32,880 --> 00:07:34,110
‫So we can just say,

144
00:07:34,110 --> 00:07:35,610
‫if to

145
00:07:35,610 --> 00:07:36,820
‫is equal

146
00:07:38,211 --> 00:07:39,123
‫1,

147
00:07:40,500 --> 00:07:41,710
‫then return

148
00:07:43,260 --> 00:07:45,570
‫this button right here.

149
00:07:45,570 --> 00:07:49,863
‫And of course, not with this text, but again with children.

150
00:07:51,840 --> 00:07:54,333
‫And then, of course, we need that navigate,

151
00:07:55,950 --> 00:07:57,633
‫so let's grab this,

152
00:07:58,500 --> 00:07:59,943
‫move it from here,

153
00:08:01,470 --> 00:08:02,303
‫and

154
00:08:03,870 --> 00:08:05,310
‫place that here,

155
00:08:05,310 --> 00:08:07,653
‫and of course, importing it.

156
00:08:08,790 --> 00:08:10,983
‫And now here we can get rid of this.

157
00:08:12,750 --> 00:08:15,003
‫And now we should be good to go.

158
00:08:16,860 --> 00:08:19,140
‫So let's just go to the homepage here,

159
00:08:19,140 --> 00:08:22,380
‫then go to some page that doesn't exist.

160
00:08:22,380 --> 00:08:24,723
‫Well, we actually should have that button.

161
00:08:26,670 --> 00:08:28,680
‫And, well, we actually do.

162
00:08:28,680 --> 00:08:30,360
‫The only thing that we didn't do

163
00:08:30,360 --> 00:08:34,023
‫was to give it these same classes.

164
00:08:34,890 --> 00:08:39,300
‫So actually, let's create a new variable here

165
00:08:39,300 --> 00:08:42,033
‫just so we can reuse this.

166
00:08:45,960 --> 00:08:48,093
‫So set className to className,

167
00:08:49,500 --> 00:08:51,813
‫just so we don't repeat ourselves here.

168
00:08:53,220 --> 00:08:54,053
‫So className

169
00:08:54,930 --> 00:08:56,700
‫should be

170
00:08:56,700 --> 00:08:57,533
‫className.

171
00:08:59,280 --> 00:09:01,800
‫Okay, let's reload.

172
00:09:01,800 --> 00:09:04,560
‫Try that again. And beautiful.

173
00:09:04,560 --> 00:09:07,350
‫Now we get our blue button here that,

174
00:09:07,350 --> 00:09:09,783
‫when we click, we simply go back.

175
00:09:11,400 --> 00:09:14,760
‫And actually, since we are already doing this,

176
00:09:14,760 --> 00:09:17,100
‫we should do something very similar

177
00:09:17,100 --> 00:09:20,070
‫with the first button that we built as well,

178
00:09:20,070 --> 00:09:22,680
‫because right here in the cart,

179
00:09:22,680 --> 00:09:25,470
‫we actually have a link to order pizzas,

180
00:09:25,470 --> 00:09:29,643
‫which you'd want to look exactly like all our other buttons,

181
00:09:30,480 --> 00:09:32,883
‫so like these buttons right here.

182
00:09:34,080 --> 00:09:36,420
‫So again, this button that we have here

183
00:09:36,420 --> 00:09:39,660
‫should look just like all these other buttons,

184
00:09:39,660 --> 00:09:43,920
‫so we want to reuse those styles for this link here as well,

185
00:09:43,920 --> 00:09:47,340
‫because indeed, this is right now just a link

186
00:09:47,340 --> 00:09:50,073
‫which takes us to this new order page.

187
00:09:51,480 --> 00:09:52,920
‫All right?

188
00:09:52,920 --> 00:09:54,543
‫So how can we do that?

189
00:09:55,650 --> 00:09:58,050
‫Well, it's gonna be something very similar

190
00:09:58,050 --> 00:10:00,123
‫to what we just did earlier.

191
00:10:01,200 --> 00:10:04,110
‫So let's use our button here,

192
00:10:04,110 --> 00:10:06,753
‫and then let's actually copy all of this.

193
00:10:08,460 --> 00:10:10,830
‫So placing that here, and then here, of course,

194
00:10:10,830 --> 00:10:13,440
‫we need to close that button.

195
00:10:13,440 --> 00:10:17,190
‫And then, in the button, we need to accept this to prop,

196
00:10:17,190 --> 00:10:19,560
‫because right now, as we click here,

197
00:10:19,560 --> 00:10:22,023
‫nothing is going to happen, of course.

198
00:10:22,860 --> 00:10:25,173
‫So let's go to this button,

199
00:10:26,220 --> 00:10:29,160
‫and then also accept the to prop.

200
00:10:29,160 --> 00:10:34,080
‫And then, basically, if there is a to prop,

201
00:10:34,080 --> 00:10:35,940
‫then all we want to do

202
00:10:35,940 --> 00:10:39,573
‫is to actually return a link and not a button.

203
00:10:41,370 --> 00:10:44,070
‫So exactly this link right here.

204
00:10:44,070 --> 00:10:47,730
‫And again, with the children.

205
00:10:47,730 --> 00:10:52,083
‫And then again, let's create that className variable,

206
00:10:55,080 --> 00:10:56,523
‫like this,

207
00:10:57,570 --> 00:10:59,103
‫grab all of that,

208
00:11:06,990 --> 00:11:10,263
‫and use the same thing right here.

209
00:11:14,430 --> 00:11:16,083
‫And so now, as we click here,

210
00:11:17,010 --> 00:11:18,900
‫well, actually nothing happens,

211
00:11:18,900 --> 00:11:23,253
‫but that's because we did not pass the to prop here.

212
00:11:25,290 --> 00:11:26,460
‫All right.

213
00:11:26,460 --> 00:11:28,380
‫So all of what we're doing here,

214
00:11:28,380 --> 00:11:32,850
‫most of this is just normal React development, right?

215
00:11:32,850 --> 00:11:35,490
‫This has not a lot to do with Tailwind.

216
00:11:35,490 --> 00:11:39,060
‫We are just using a mechanism, or creating a mechanism,

217
00:11:39,060 --> 00:11:42,600
‫to reuse these class names right here.

218
00:11:42,600 --> 00:11:44,610
‫So basically, we are creating a button

219
00:11:44,610 --> 00:11:48,153
‫that can act both as a link and as a button.

220
00:11:49,260 --> 00:11:51,570
‫But anyway, as we click here now,

221
00:11:51,570 --> 00:11:53,850
‫then it moves to that page,

222
00:11:53,850 --> 00:11:56,550
‫but it also acts as a regular button

223
00:11:56,550 --> 00:11:58,713
‫in this situation right here.

224
00:12:00,180 --> 00:12:01,110
‫Beautiful.

225
00:12:01,110 --> 00:12:05,100
‫So for now, this works fine like this, and later on,

226
00:12:05,100 --> 00:12:08,130
‫we will then create some variations here as well,

227
00:12:08,130 --> 00:12:11,760
‫for example here for this other secondary button,

228
00:12:11,760 --> 00:12:14,010
‫or maybe for some smaller button.

229
00:12:14,010 --> 00:12:16,260
‫But for now, this is really nice.

230
00:12:16,260 --> 00:12:18,750
‫And so this is one of the ways

231
00:12:18,750 --> 00:12:21,990
‫in which we can reuse some Tailwind styles

232
00:12:21,990 --> 00:12:24,453
‫using regular React components.