00:00 All righty, so what we want is to be able to say, hey, I have a size and that size is small, right? That's the objective here. So to add a size, we're going to need to add a type for this. So we'll say, and the size is optional and it can be small, medium, or large. So now the types are happy about this,

00:19 but we're not doing anything with that size and that size is being slurped up into this other props. So if I save that, and we're going to see our small light blue box is looking funny because we're no longer passing that class name. And we should be getting that size in our other props.

00:37 So let's console log the other props right here. Let's look at the console. Boom, we've got our size small. Okay, so we need to convert that size small into a class name that gets applied. So I'm actually going to pluck off size right here. We're not going to default it. And we'll have a size class name

00:57 that equals the size if it's provided, then box size, or just an empty string. And then we're going to turn this class or include that size class name in here. Size class, class name, there we go. And save that. And boom, now our small light blue box is looking good.

01:17 Here, let's get rid of our props there. We've got our box small, box medium, all of that. You'll notice we've got this double extra space and that's because the class name is not defined. It's defaulting to an empty string, which we don't really want actually, because we have a space on this side and a space on this side. Even if we trim it, that's not going to work.

01:39 So what I actually fairly often do is I'll turn this into an array. Oh, whoops. Then I will filter any falsy values, like empty strings, and then I'll join with a space. And with that now, we have no extra spaces. So anybody who's concerned about that,

02:03 not that it actually matters, it doesn't. It doesn't actually matter. But if you are concerned about it, then that's how you can fix that. Filter out the falsy stuff and then join with spaces. So that's cool. One other interesting thing is we could actually delete the class name here and it gets slurped up into the other props. And if we move this class name down here, then it's going to override the class name

02:22 that's in the other props. And then we can access this from other props. So that still works. So that's nice. Just taking advantage of the order of things. And we could actually do the same for style. So move this style down here, then merge this with other props.style. And also, as the author of your component,

02:42 you get total control. So if you didn't want to let people override the font style, you're like, no, no, no. This has always got to be italic. Then you can move the font style to this side and now they can never override the font style. So you have a lot of control over how you compose these things together. And this, again, is one of the reasons why the style attribute is actually quite nice

03:02 is because you have that level of control. With class names, it's a little bit more tricky. But by providing a size prop, you can kind of narrow things down a little bit more and just make things a little bit better. And so what's cool about this, though, is that now our users of our component

03:21 are gonna get a really nice user experience or developer experience with Autocomplete. So we can say size, and here, this one's a medium. And if they misspell medium, medium, then we're gonna get some help with that. And then also we have large, size is large.

03:40 And all of our class names are applied properly. And honestly, the styling of the box is now all self-contained. So the component is the only one that knows or cares about the style box and the style box dash dash size, whatever. It can provide a nice API for anybody who's using the box

03:59 so that the users of the box don't have to know how the styling is happening. They just know, oh, I can provide the size and it's going to work that way. A pretty common practice to do something like that. So you're not just saying, here's the style sheet. Apply whatever class names you want. You give it a much more defined shape.

04:18 So I think that's pretty cool. And I think you are cool too. Good job.