‫To finish this part about styled components,
‫let's just build two more reusable components
‫that we are going to need all the time
‫while we'll be building our application.
‫And let's start with a reusable row component.
‫So let's say, for example,
‫that we want this entire part here, so all of this,
‫to be side by side with this Wild Oasis title.
‫So basically, we want a row which contains both this
‫and then a box with this.
‫And following the same logic,
‫we might also want a row for all of this.
‫But this one might be a different row.
‫So here, maybe we want the form first
‫and then after that we want a box with these two.
‫So they should still be in some kind of box,
‫but a different box.
‫So here, the layout is horizontal and here, vertical.
‫And so let's create a component for that.
‫So right here in UI, let's create Row.jsx.
‫And so let's call this Row,
‫which is going to be a styled, a div,
‫and let's immediately export that.
‫And so let's then also, right away, start using it.
‫So even though it doesn't really have
‫any styles applied yet, but it is already a div,
‫so we can already use it as such.
‫So as I was saying, let's say we want the heading,
‫so the main heading, and then we want a div,
‫which contains all of this.
‫And so for now, of course, there is no styling yet,
‫but we will add that later.
‫And now again, let's say we have both these inputs here
‫in a div, or maybe even in a form,
‫just like this, but then we want to have a row
‫so that we can easily add some spacing between them.
‫So this one here,
‫we might want it to be of the type of horizontal,
‫and this other one might be of the type vertical.
‫And again, here we are just using this type prop here,
‫but it could be any other one.
‫So this is basically the API of this component,
‫so the way that we want to use it,
‫and so let's now style this thing.
‫But first off, let's maybe get rid
‫of this annoying orange background.
‫Now, okay.
‫And first of all, let's actually make both
‫of these types of rows flex containers.
‫So immediately, something starts to happen there,
‫but now we want different behaviors for the two.
‫So let's enter JavaScript mode
‫and then let's grab our props again.
‫And so then based on that, we can do,
‫or we can create here some extra styles.
‫So let's say that the props.type is equal horizontal.
‫And so in that case, let's render this string right here.
‫Or again, let's actually use the CSS function
‫so that we get some syntax highlighting.
‫So here, what we want is justify content
‫to space between, just like this,
‫and also let's align items to the center.
‫Beautiful.
‫And now this is not what I wanted.
‫So I just wanted to select all of this
‫so that we can now do the same thing with the vertical row.
‫So here, all we want to do is to,
‫well, as the name says, make it vertical,
‫and so we just change the flex direction to column
‫and then let's add some gap of 1.6 rem.
‫Okay, nice.
‫And that's actually all I wanted to do.
‫So we can now, even, if we want,
‫place these two rows in another row.
‫So row of type vertical.
‫And there we go.
‫So then we created also some space between this row
‫and this row right here.
‫Okay, so basically one by one,
‫we are kind of building a design system here,
‫which contains all of these small components right here.
‫And as you see, many of them are actually already built,
‫for example here, this text area,
‫or this small tag component
‫or many other of these here.
‫And of course, the styling here
‫could be completely different,
‫but this is simply what's going to be best for our project.
‫So this will all make more sense
‫when the whole layout actually comes together
‫here in this application.
‫Now, just one final thing
‫that we can do with this component,
‫and this actually has nothing to do with style components,
‫but really with React,
‫and so what I'm talking about is this.
‫So on any React component,
‫we can actually set default props.
‫So we can do exactly this.
‫And so we can then set the type to vertical by default.
‫And so therefore, we can now simply omit
‫this one right here and the second occurrence as well.
‫And so then nothing changes here in the app,
‫because, well, as the name says,
‫by default, the prop will now be vertical.
‫So this type will be set to vertical.
‫Now, we haven't ever used this before,
‫because usually when we define props
‫or when we want to define props in a regular component,
‫then we always just do it like this.
‫So this is how we would define default props,
‫usually when we write our own components.
‫So using this destructuring syntax.
‫But here, since we are defining it in another way,
‫we cannot do that.
‫And so then we can still use this way,
‫which is really, really handy.
‫Now, okay.
‫And with that being set,
‫let's go back to the button component actually.
‫And so let's take a look
‫at this other code that we already have here.
‫So basically, we have here one object called sizes
‫which has the small, medium and large property,
‫and for each of them,
‫I included some lines of CSS code here.
‫And the same thing for these variations.
‫So we will have a primary, a secondary and a danger button.
‫So there are basically nine combinations
‫of buttons that we can create,
‫and so I think that this is a great way
‫of expressing all the different code that we can have.
‫And so now all we have to do here
‫is to receive these things as props
‫and to then, based on those props,
‫we select whatever styles we want from these two objects.
‫So we no longer need this,
‫actually neither this,
‫because this is in the global styles,
‫then the box shadow might always stay the same,
‫but not the text color or the background color.
‫Then here, the font weight is also going to change
‫as is the padding and the font size.
‫So this will be coming now
‫from the variations and from the size objects.
‫So you see that immediately our styles here were lost,
‫but so let's then, right here, add some prop,
‫so just so we see how we will use these buttons.
‫So let's make this one of the variation primary
‫and of the size medium,
‫while the second one, let's just grab this,
‫and so here, let's make it a secondary button
‫and let's make it small.
‫So I think those are the names that we have here.
‫Yeah, primary, secondary, we have large, medium and small.
‫And so let's now grab those props here
‫and then select those styles accordingly.
‫So starting with the sizes,
‫we can just do sizes at props.size,
‫an then the same thing, actually, with the variations.
‫Then .variation, I believe.
‫And there we go.
‫So that's already working.
‫And so this is just some regular JavaScript, right?
‫So from this variations object,
‫we simply take the property that has
‫whatever name we are inputting there.
‫All right.
‫And so here we could of course also do medium,
‫or we could do large, or we could do danger,
‫which actually we cannot,
‫because that is a variation.
‫And so then it becomes red.
‫But let's actually put it back.
‫Now, okay.
‫And just like before, let's declare some default props.
‫So variation will be, by default, a primary button,
‫and the size, let's make it, by default, medium.
‫And so then that first button that we have here
‫doesn't need any props, even.
‫Alright, nice.
‫And so this is just another way in which we can create
‫a highly reusable component using styled components.