1 00:00:01,140 --> 00:00:04,350 ‫To finish this part about styled components, 2 00:00:04,350 --> 00:00:07,740 ‫let's just build two more reusable components 3 00:00:07,740 --> 00:00:10,080 ‫that we are going to need all the time 4 00:00:10,080 --> 00:00:13,113 ‫while we'll be building our application. 5 00:00:14,970 --> 00:00:19,140 ‫And let's start with a reusable row component. 6 00:00:19,140 --> 00:00:20,640 ‫So let's say, for example, 7 00:00:20,640 --> 00:00:24,660 ‫that we want this entire part here, so all of this, 8 00:00:24,660 --> 00:00:29,010 ‫to be side by side with this Wild Oasis title. 9 00:00:29,010 --> 00:00:33,090 ‫So basically, we want a row which contains both this 10 00:00:33,090 --> 00:00:35,640 ‫and then a box with this. 11 00:00:35,640 --> 00:00:37,470 ‫And following the same logic, 12 00:00:37,470 --> 00:00:40,890 ‫we might also want a row for all of this. 13 00:00:40,890 --> 00:00:43,320 ‫But this one might be a different row. 14 00:00:43,320 --> 00:00:46,470 ‫So here, maybe we want the form first 15 00:00:46,470 --> 00:00:50,640 ‫and then after that we want a box with these two. 16 00:00:50,640 --> 00:00:53,400 ‫So they should still be in some kind of box, 17 00:00:53,400 --> 00:00:55,080 ‫but a different box. 18 00:00:55,080 --> 00:00:59,400 ‫So here, the layout is horizontal and here, vertical. 19 00:00:59,400 --> 00:01:02,463 ‫And so let's create a component for that. 20 00:01:03,510 --> 00:01:08,510 ‫So right here in UI, let's create Row.jsx. 21 00:01:10,732 --> 00:01:13,080 ‫And so let's call this Row, 22 00:01:13,080 --> 00:01:16,503 ‫which is going to be a styled, a div, 23 00:01:17,501 --> 00:01:21,723 ‫and let's immediately export that. 24 00:01:24,210 --> 00:01:29,043 ‫And so let's then also, right away, start using it. 25 00:01:31,440 --> 00:01:33,660 ‫So even though it doesn't really have 26 00:01:33,660 --> 00:01:37,350 ‫any styles applied yet, but it is already a div, 27 00:01:37,350 --> 00:01:40,173 ‫so we can already use it as such. 28 00:01:42,750 --> 00:01:45,933 ‫So as I was saying, let's say we want the heading, 29 00:01:46,800 --> 00:01:49,590 ‫so the main heading, and then we want a div, 30 00:01:49,590 --> 00:01:51,843 ‫which contains all of this. 31 00:01:54,630 --> 00:01:57,930 ‫And so for now, of course, there is no styling yet, 32 00:01:57,930 --> 00:02:00,180 ‫but we will add that later. 33 00:02:00,180 --> 00:02:04,950 ‫And now again, let's say we have both these inputs here 34 00:02:04,950 --> 00:02:07,803 ‫in a div, or maybe even in a form, 35 00:02:09,750 --> 00:02:12,460 ‫just like this, but then we want to have a row 36 00:02:13,620 --> 00:02:16,653 ‫so that we can easily add some spacing between them. 37 00:02:19,080 --> 00:02:20,460 ‫So this one here, 38 00:02:20,460 --> 00:02:25,460 ‫we might want it to be of the type of horizontal, 39 00:02:28,050 --> 00:02:33,050 ‫and this other one might be of the type vertical. 40 00:02:33,210 --> 00:02:37,110 ‫And again, here we are just using this type prop here, 41 00:02:37,110 --> 00:02:38,883 ‫but it could be any other one. 42 00:02:40,470 --> 00:02:44,070 ‫So this is basically the API of this component, 43 00:02:44,070 --> 00:02:45,930 ‫so the way that we want to use it, 44 00:02:45,930 --> 00:02:49,290 ‫and so let's now style this thing. 45 00:02:49,290 --> 00:02:51,630 ‫But first off, let's maybe get rid 46 00:02:51,630 --> 00:02:54,333 ‫of this annoying orange background. 47 00:02:56,340 --> 00:02:57,183 ‫Now, okay. 48 00:02:59,070 --> 00:03:01,830 ‫And first of all, let's actually make both 49 00:03:01,830 --> 00:03:05,253 ‫of these types of rows flex containers. 50 00:03:06,480 --> 00:03:09,720 ‫So immediately, something starts to happen there, 51 00:03:09,720 --> 00:03:12,993 ‫but now we want different behaviors for the two. 52 00:03:14,310 --> 00:03:17,160 ‫So let's enter JavaScript mode 53 00:03:17,160 --> 00:03:19,653 ‫and then let's grab our props again. 54 00:03:20,940 --> 00:03:23,326 ‫And so then based on that, we can do, 55 00:03:23,326 --> 00:03:26,493 ‫or we can create here some extra styles. 56 00:03:27,720 --> 00:03:32,720 ‫So let's say that the props.type is equal horizontal. 57 00:03:34,950 --> 00:03:39,240 ‫And so in that case, let's render this string right here. 58 00:03:39,240 --> 00:03:42,540 ‫Or again, let's actually use the CSS function 59 00:03:42,540 --> 00:03:45,930 ‫so that we get some syntax highlighting. 60 00:03:45,930 --> 00:03:49,470 ‫So here, what we want is justify content 61 00:03:49,470 --> 00:03:53,820 ‫to space between, just like this, 62 00:03:53,820 --> 00:03:57,363 ‫and also let's align items to the center. 63 00:03:58,350 --> 00:04:00,000 ‫Beautiful. 64 00:04:00,000 --> 00:04:01,833 ‫And now this is not what I wanted. 65 00:04:02,790 --> 00:04:05,520 ‫So I just wanted to select all of this 66 00:04:05,520 --> 00:04:10,383 ‫so that we can now do the same thing with the vertical row. 67 00:04:11,430 --> 00:04:15,000 ‫So here, all we want to do is to, 68 00:04:15,000 --> 00:04:17,400 ‫well, as the name says, make it vertical, 69 00:04:17,400 --> 00:04:21,120 ‫and so we just change the flex direction to column 70 00:04:21,120 --> 00:04:24,813 ‫and then let's add some gap of 1.6 rem. 71 00:04:26,370 --> 00:04:28,800 ‫Okay, nice. 72 00:04:28,800 --> 00:04:31,230 ‫And that's actually all I wanted to do. 73 00:04:31,230 --> 00:04:34,200 ‫So we can now, even, if we want, 74 00:04:34,200 --> 00:04:37,023 ‫place these two rows in another row. 75 00:04:39,450 --> 00:04:44,450 ‫So row of type vertical. 76 00:04:50,310 --> 00:04:51,420 ‫And there we go. 77 00:04:51,420 --> 00:04:54,900 ‫So then we created also some space between this row 78 00:04:54,900 --> 00:04:56,523 ‫and this row right here. 79 00:04:57,990 --> 00:05:00,300 ‫Okay, so basically one by one, 80 00:05:00,300 --> 00:05:03,120 ‫we are kind of building a design system here, 81 00:05:03,120 --> 00:05:07,200 ‫which contains all of these small components right here. 82 00:05:07,200 --> 00:05:10,590 ‫And as you see, many of them are actually already built, 83 00:05:10,590 --> 00:05:13,950 ‫for example here, this text area, 84 00:05:13,950 --> 00:05:17,970 ‫or this small tag component 85 00:05:17,970 --> 00:05:21,120 ‫or many other of these here. 86 00:05:21,120 --> 00:05:22,500 ‫And of course, the styling here 87 00:05:22,500 --> 00:05:24,090 ‫could be completely different, 88 00:05:24,090 --> 00:05:28,380 ‫but this is simply what's going to be best for our project. 89 00:05:28,380 --> 00:05:30,600 ‫So this will all make more sense 90 00:05:30,600 --> 00:05:33,210 ‫when the whole layout actually comes together 91 00:05:33,210 --> 00:05:35,310 ‫here in this application. 92 00:05:35,310 --> 00:05:36,690 ‫Now, just one final thing 93 00:05:36,690 --> 00:05:39,300 ‫that we can do with this component, 94 00:05:39,300 --> 00:05:43,140 ‫and this actually has nothing to do with style components, 95 00:05:43,140 --> 00:05:45,250 ‫but really with React, 96 00:05:45,250 --> 00:05:48,090 ‫and so what I'm talking about is this. 97 00:05:48,090 --> 00:05:50,040 ‫So on any React component, 98 00:05:50,040 --> 00:05:52,593 ‫we can actually set default props. 99 00:05:54,450 --> 00:05:57,480 ‫So we can do exactly this. 100 00:05:57,480 --> 00:06:02,360 ‫And so we can then set the type to vertical by default. 101 00:06:03,750 --> 00:06:07,150 ‫And so therefore, we can now simply omit 102 00:06:08,550 --> 00:06:12,930 ‫this one right here and the second occurrence as well. 103 00:06:12,930 --> 00:06:15,480 ‫And so then nothing changes here in the app, 104 00:06:15,480 --> 00:06:17,940 ‫because, well, as the name says, 105 00:06:17,940 --> 00:06:21,630 ‫by default, the prop will now be vertical. 106 00:06:21,630 --> 00:06:24,540 ‫So this type will be set to vertical. 107 00:06:24,540 --> 00:06:27,270 ‫Now, we haven't ever used this before, 108 00:06:27,270 --> 00:06:29,890 ‫because usually when we define props 109 00:06:31,140 --> 00:06:34,383 ‫or when we want to define props in a regular component, 110 00:06:37,140 --> 00:06:39,273 ‫then we always just do it like this. 111 00:06:42,540 --> 00:06:44,910 ‫So this is how we would define default props, 112 00:06:44,910 --> 00:06:48,000 ‫usually when we write our own components. 113 00:06:48,000 --> 00:06:50,700 ‫So using this destructuring syntax. 114 00:06:50,700 --> 00:06:53,790 ‫But here, since we are defining it in another way, 115 00:06:53,790 --> 00:06:54,930 ‫we cannot do that. 116 00:06:54,930 --> 00:06:57,450 ‫And so then we can still use this way, 117 00:06:57,450 --> 00:06:59,193 ‫which is really, really handy. 118 00:07:00,270 --> 00:07:01,103 ‫Now, okay. 119 00:07:01,103 --> 00:07:02,340 ‫And with that being set, 120 00:07:02,340 --> 00:07:06,360 ‫let's go back to the button component actually. 121 00:07:06,360 --> 00:07:07,620 ‫And so let's take a look 122 00:07:07,620 --> 00:07:10,383 ‫at this other code that we already have here. 123 00:07:11,400 --> 00:07:15,180 ‫So basically, we have here one object called sizes 124 00:07:15,180 --> 00:07:18,150 ‫which has the small, medium and large property, 125 00:07:18,150 --> 00:07:19,260 ‫and for each of them, 126 00:07:19,260 --> 00:07:23,010 ‫I included some lines of CSS code here. 127 00:07:23,010 --> 00:07:25,770 ‫And the same thing for these variations. 128 00:07:25,770 --> 00:07:30,770 ‫So we will have a primary, a secondary and a danger button. 129 00:07:31,110 --> 00:07:33,360 ‫So there are basically nine combinations 130 00:07:33,360 --> 00:07:35,790 ‫of buttons that we can create, 131 00:07:35,790 --> 00:07:38,340 ‫and so I think that this is a great way 132 00:07:38,340 --> 00:07:42,030 ‫of expressing all the different code that we can have. 133 00:07:42,030 --> 00:07:43,890 ‫And so now all we have to do here 134 00:07:43,890 --> 00:07:46,860 ‫is to receive these things as props 135 00:07:46,860 --> 00:07:49,230 ‫and to then, based on those props, 136 00:07:49,230 --> 00:07:53,073 ‫we select whatever styles we want from these two objects. 137 00:07:56,010 --> 00:07:58,890 ‫So we no longer need this, 138 00:07:58,890 --> 00:08:00,120 ‫actually neither this, 139 00:08:00,120 --> 00:08:02,610 ‫because this is in the global styles, 140 00:08:02,610 --> 00:08:05,940 ‫then the box shadow might always stay the same, 141 00:08:05,940 --> 00:08:08,703 ‫but not the text color or the background color. 142 00:08:10,710 --> 00:08:13,530 ‫Then here, the font weight is also going to change 143 00:08:13,530 --> 00:08:16,680 ‫as is the padding and the font size. 144 00:08:16,680 --> 00:08:18,390 ‫So this will be coming now 145 00:08:18,390 --> 00:08:23,103 ‫from the variations and from the size objects. 146 00:08:24,720 --> 00:08:28,320 ‫So you see that immediately our styles here were lost, 147 00:08:28,320 --> 00:08:33,320 ‫but so let's then, right here, add some prop, 148 00:08:34,530 --> 00:08:38,130 ‫so just so we see how we will use these buttons. 149 00:08:38,130 --> 00:08:42,220 ‫So let's make this one of the variation primary 150 00:08:46,217 --> 00:08:49,113 ‫and of the size medium, 151 00:08:50,520 --> 00:08:54,630 ‫while the second one, let's just grab this, 152 00:08:54,630 --> 00:08:59,280 ‫and so here, let's make it a secondary button 153 00:08:59,280 --> 00:09:02,910 ‫and let's make it small. 154 00:09:02,910 --> 00:09:06,120 ‫So I think those are the names that we have here. 155 00:09:06,120 --> 00:09:10,590 ‫Yeah, primary, secondary, we have large, medium and small. 156 00:09:10,590 --> 00:09:13,740 ‫And so let's now grab those props here 157 00:09:13,740 --> 00:09:16,233 ‫and then select those styles accordingly. 158 00:09:20,940 --> 00:09:22,890 ‫So starting with the sizes, 159 00:09:22,890 --> 00:09:27,330 ‫we can just do sizes at props.size, 160 00:09:29,010 --> 00:09:33,783 ‫an then the same thing, actually, with the variations. 161 00:09:36,570 --> 00:09:41,010 ‫Then .variation, I believe. 162 00:09:41,010 --> 00:09:42,720 ‫And there we go. 163 00:09:42,720 --> 00:09:44,583 ‫So that's already working. 164 00:09:45,480 --> 00:09:49,080 ‫And so this is just some regular JavaScript, right? 165 00:09:49,080 --> 00:09:51,030 ‫So from this variations object, 166 00:09:51,030 --> 00:09:54,480 ‫we simply take the property that has 167 00:09:54,480 --> 00:09:57,003 ‫whatever name we are inputting there. 168 00:09:58,410 --> 00:09:59,243 ‫All right. 169 00:09:59,243 --> 00:10:03,330 ‫And so here we could of course also do medium, 170 00:10:03,330 --> 00:10:08,073 ‫or we could do large, or we could do danger, 171 00:10:09,180 --> 00:10:11,520 ‫which actually we cannot, 172 00:10:11,520 --> 00:10:13,683 ‫because that is a variation. 173 00:10:16,020 --> 00:10:17,793 ‫And so then it becomes red. 174 00:10:18,720 --> 00:10:21,003 ‫But let's actually put it back. 175 00:10:22,440 --> 00:10:23,370 ‫Now, okay. 176 00:10:23,370 --> 00:10:27,333 ‫And just like before, let's declare some default props. 177 00:10:31,890 --> 00:10:36,890 ‫So variation will be, by default, a primary button, 178 00:10:37,650 --> 00:10:41,553 ‫and the size, let's make it, by default, medium. 179 00:10:43,080 --> 00:10:45,450 ‫And so then that first button that we have here 180 00:10:45,450 --> 00:10:48,603 ‫doesn't need any props, even. 181 00:10:50,580 --> 00:10:52,500 ‫Alright, nice. 182 00:10:52,500 --> 00:10:55,710 ‫And so this is just another way in which we can create 183 00:10:55,710 --> 00:11:00,003 ‫a highly reusable component using styled components.