‫So as I just mentioned,
‫let's now learn about a better way
‫of reusing styles in Tailwind,
‫which is by using
‫or by actually creating new React components.
‫So what we want to reuse now is all
‫of this style right here.
‫So the style for this button.
‫And so what we're gonna do
‫is to just create a new React component.
‫So let's grab all of this right here,
‫and then here, in the generic components folder,
‫let's create Button.jsx.
‫And using again our snippet.
‫And here,
‫as always, we need to then take in the children.
‫So all the elements that will be passed into this
‫button element.
‫And then here we simply return a button with this class.
‫All right.
‫Now, to make this really reusable,
‫we also need to accept the disabled prop,
‫and then also place that on the button.
‫So let's do that, disabled.
‫And then here,
‫let's say disabled=disabled.
‫Okay. And that should actually be it.
‫So here we should be able to just replace this button
‫with the one that we just created,
‫but of course, without this last name here.
‫And here, that's Button.
‫And there we go. It looks exactly the same.
‫And so we can now, back on our homepage,
‫reuse the same button here,
‫because once we start typing something here,
‫then this button will appear where we can then click,
‫and it will take us to the main page.
‫So let's close maybe this one here.
‫So that is at CreateUser.
‫So here we have this button,
‫and so we can just replace that now
‫with that button that we just created.
‫Beautiful.
‫Now, this is not perfect yet,
‫so this needs a bit more styling.
‫And here we can now actually reuse
‫that input class that we already have.
‫So in the previous lecture, remember, we created this input,
‫and so we can now add that right here.
‫And so we now get exactly the same style that we had before.
‫And in this case, the advantage is that,
‫now, onto this class,
‫so onto all the styles that we already have here,
‫we can now keep adding on more.
‫So here, besides all of these,
‫we now also added this width,
‫and we can even add a margin to the bottom,
‫of eight, for example,
‫so to create this distance right there.
‫And so this is another good use case
‫of actually using the @apply directive
‫that we used in the previous lecture.
‫So whenever you are in a situation
‫where you actually need to add
‫a lot more other classes in some situations.
‫So that's the case right here.
‫And so here again, we were able to use
‫all the styles here from the input class,
‫but then add these two on top.
‫Right?
‫So again, back to the button here,
‫we just were able to reuse all these styles here
‫just by creating this new button component,
‫which now encapsulates all these styles.
‫And so whenever you are using Tailwind
‫in some framework that has components,
‫this is what you should do.
‫I just noticed that maybe here some styling is a bit off,
‫so actually let's add a little bit more padding
‫once the page is a bit bigger.
‫So maybe here in the media query,
‫let's do padding here, six,
‫and
‫padding Y
‫to four.
‫Or actually right, after the small media query,
‫otherwise we cannot really see it.
‫Okay?
‫Nice.
‫And now, let's also reuse this link that we have right here.
‫So we have this link in the cart,
‫so we can close this one, and also this one for now,
‫and this one as well.
‫So let's open up the cart where we have this link here.
‫And then also in the error, we have a similar-looking link,
‫even though here it is actually a button.
‫So if I tried this,
‫then here we have something that looks very similar,
‫and so we also want to reuse that style.
‫And so let's create another button.
‫This one will be a bit more complex.
‫So let's call it
‫a
‫LinkButton,
‫just like this.
‫And again, it needs to receive the children,
‫and also
‫the to prop.
‫So similar to the one that we paste in here.
‫All right.
‫So let's just grab all of this,
‫because what we want to return
‫from this LinkButton is usually this link.
‫So let's do this.
‫And then, of course, we need to import that link right here.
‫And then here we need the children.
‫And then to close that link.
‫All right. And here we now want to dynamically set the to.
‫So to
‫this to.
‫Okay.
‫And so, let's now use that here in the cart instead of this.
‫So LinkButton.
‫And with this, we can get rid
‫of that.
‫Let's just reload.
‫And that works just the same.
‫Beautiful.
‫But now, what about this error here?
‫So we want to use the exact same thing right here,
‫but here we have a button.
‫Well, let's do some trick here.
‫Let's still use the LinkButton that we just created
‫with this text
‫right here.
‫But then, as the to prop,
‫let's pass in
‫just -1 as a string.
‫And then, inside this LinkButton component,
‫we can check whether this is the to prop that we received.
‫And if so, what we want to return is this button.
‫All right. So we abstract again all that logic right here.
‫So we can just say,
‫if to
‫is equal
‫1,
‫then return
‫this button right here.
‫And of course, not with this text, but again with children.
‫And then, of course, we need that navigate,
‫so let's grab this,
‫move it from here,
‫and
‫place that here,
‫and of course, importing it.
‫And now here we can get rid of this.
‫And now we should be good to go.
‫So let's just go to the homepage here,
‫then go to some page that doesn't exist.
‫Well, we actually should have that button.
‫And, well, we actually do.
‫The only thing that we didn't do
‫was to give it these same classes.
‫So actually, let's create a new variable here
‫just so we can reuse this.
‫So set className to className,
‫just so we don't repeat ourselves here.
‫So className
‫should be
‫className.
‫Okay, let's reload.
‫Try that again. And beautiful.
‫Now we get our blue button here that,
‫when we click, we simply go back.
‫And actually, since we are already doing this,
‫we should do something very similar
‫with the first button that we built as well,
‫because right here in the cart,
‫we actually have a link to order pizzas,
‫which you'd want to look exactly like all our other buttons,
‫so like these buttons right here.
‫So again, this button that we have here
‫should look just like all these other buttons,
‫so we want to reuse those styles for this link here as well,
‫because indeed, this is right now just a link
‫which takes us to this new order page.
‫All right?
‫So how can we do that?
‫Well, it's gonna be something very similar
‫to what we just did earlier.
‫So let's use our button here,
‫and then let's actually copy all of this.
‫So placing that here, and then here, of course,
‫we need to close that button.
‫And then, in the button, we need to accept this to prop,
‫because right now, as we click here,
‫nothing is going to happen, of course.
‫So let's go to this button,
‫and then also accept the to prop.
‫And then, basically, if there is a to prop,
‫then all we want to do
‫is to actually return a link and not a button.
‫So exactly this link right here.
‫And again, with the children.
‫And then again, let's create that className variable,
‫like this,
‫grab all of that,
‫and use the same thing right here.
‫And so now, as we click here,
‫well, actually nothing happens,
‫but that's because we did not pass the to prop here.
‫All right.
‫So all of what we're doing here,
‫most of this is just normal React development, right?
‫This has not a lot to do with Tailwind.
‫We are just using a mechanism, or creating a mechanism,
‫to reuse these class names right here.
‫So basically, we are creating a button
‫that can act both as a link and as a button.
‫But anyway, as we click here now,
‫then it moves to that page,
‫but it also acts as a regular button
‫in this situation right here.
‫Beautiful.
‫So for now, this works fine like this, and later on,
‫we will then create some variations here as well,
‫for example here for this other secondary button,
‫or maybe for some smaller button.
‫But for now, this is really nice.
‫And so this is one of the ways
‫in which we can reuse some Tailwind styles
‫using regular React components.