So it would be nice if I could make the process of creating these little slide-up modals as simple and intuitive as possible. All right, let's go to the Join page. This component corresponds to what you see here. And mostly, it's a standard thing. We have some headings, we have a Close button, we filter through and show all of the various plans. But I don't want you to focus on any of that other than the Modal section right here. So behind the scenes, I'm using a third-party modal. It's something like Vue.js Modal.

It's difficult to extract when you've already kind of constructed things the way you want. So often in these cases, what I will do is I just start from scratch. I say, okay, ideally, how would I want to create this modal? Well maybe we have a specialized component, like SlideUpModal. It's a modal specifically that will slide up and it's optimized for my site. You know, it's not something I'm going to distribute on NPM. It's something very specific for my needs. Now I do need to give it a name. Can't get beyond that, so we'll call that JoinModal. And then here we have a heading, but you'll notice, yeah, every time I'm having to add

I don't want to have to remember, well, every time we create a section here and we give it a background color, and then we create a heading using these specific classes, and then we add a close button, and then we need to make sure we add a border so we get this little thing here. You know, it gets tedious and you constantly end up opening other files where you've already created one, and you copy it over. Yeah, it stinks. Instead, I want something kind of simple like this. Okay, so with that in mind, I'm going to create a new component, Resources, Assets, JS, Components. And I'll store it here for now, a slideUpModal.

Okay, so with that in mind, I'm going to create a new component, Resources, Assets, JS, Components. And I'll store it here for now, a slide up modal. And well, actually, you know what? Let's bring this back to what we had. I'll save that there for reference. Okay. But anyways, we need to add our script, and we'll begin. So one more time right here, well, we're going to have to wrap it within this modal. Now that component's available globally, so I don't have to import it. But I do need to accept a prop for the name of the modal, and then I can reference that.

Now that component's available globally, so I don't have to import it. But I do need to accept a prop for the name of the modal, and then I can reference that here. And yeah, you know, we can take this as far as we need to. I can make those configurable, but at the moment, I don't have that need. So I wouldn't add that flexibility until I actually need it, because I may never need it. At which point, there's no point in making those configurable. Okay. Anyways, so now we have that.

All right. So now I'm going to come back up, and I know I'm going to give it a name, and it looks like I do want to give it a special class for this modal specifically. Okay. What next? Let's keep scrolling down. So we have a section for the heading. So why don't we... Let's do this. Let's add a slot called the heading wrap.

Let's do this. Let's add a slot called the heading wrap. So we can provide a heading for you, but if you just want to do your own thing there, you can override this entirely. All right. So I will paste that in, and then we'll add another slot for the heading. This is a pretty common pattern because if I didn't have this, well, you're always going to get this HTML here, but for the sections where you just don't need that, it's not necessary. There's no heading or you want a custom heading.

All right. I think this is looking fairly good. So now I want to use that. So here we'll pull in the slide up modal, and that's just within the current directory. And I'll register that here. Okay. Now we can use it. So at this point, we basically have everything here working. So I can start migrating over. So I'm just going to do this one bit at a time.

Let's just imagine you were creating a brand new Modal. All right. You'd say, yeah, I need a slide up Modal. To start, I'll have a slot for the header. And I'll say, hello world. We'll add another slot for the main section. Something like that. And then we'll add one more slot for the footer. And this can just be a standard button. And there we go.

And now we have our custom modal. Now one final thing. What about a close button that will hide the modal? It'd be nice if we didn't have to manually add that for each one. All right. Fair enough. Let's place it maybe within the heading wrap. Or maybe after. We'll think about it. But for now, I'll put it within it.

So we will reference the name value. Again, that's the prop that we passed in right up here. Okay. Back to Chrome. And now if I click sign up, our template now includes a close button. So the final step is at this point, yeah, we can make it as configurable as we need to. So we may not always want to pivot to the very bottom. So in that case, we can make it configurable. We'll accept that as a prop.

So in that case, we can make it configurable. We'll accept that as a prop. No problem. Scroll down. pivotY. And you know what? We should make that a default. So let's switch to the object syntax. Our name, the classes, and then the pivotY. We'll have a default of 1, which is what we had earlier, right?

Our name, the classes, and then the pivotY. We'll have a default of 1, which is what we had earlier, right? Okay. So let's see. Back to Chrome. We have our default. But now let's make it start at the very top. All right. So we'll say right here, pivotY, or maybe even a cleaner name. I don't love pivotY, but we can start with 0.

Yeah, it gets tricky. And you can solve some of that with CSS classes. That's a nice thing about CSS. If you reference a class name of heading here, well, in that other area where you use that class of heading, of course, they're going to be consistent. Another option is to extract a dedicated component where you can store these things. Both have their place. All right, that about does it. I'll see you next time.