Let's do another one. This time I'd like to create a Modal component. And why don't we sort of design it first, how we want to interact with it. I want to give it a title, and we'll say, do you want to deactivate your account? We could do a body here, or sometimes when there's HTML as part of the body, you might want to make that your default slot. And I'll just paste in some generic text there. And then finally, I need some trigger to toggle the modal. And you can actually do this in a number of ways, of course. You could store state on some kind of root component.

And you can actually do this in a number of ways, of course. You could store state on some kind of root component. You could dispatch a global event. Or you could store it directly on the modal, and then just use it as a trigger. So why don't we take that approach? We'll set up a slot here, and we'll call it trigger. And then that'll be a button, and we'll just say show modal for the example. Now all I have to do is say, when you click on me, just turn it on, something like that. Or you could wrap that event handling, whatever you want to do. All right, so of course, if we load this in Firefox, it's going to fail because the component

Or you could wrap that event handling, whatever you want to do. All right, so of course, if we load this in Firefox, it's going to fail because the component doesn't exist. So let's get started. We'll add a new one here called modal. And yeah, we could do it from scratch, but the reality is for a nice, flexible, responsive, accessible modal, it's a decent amount of work. So instead, let's let somebody else do the work for us. We'll reach for one of the free Tailwind UI components. And if you're working along, just go to tailwindui.com and have a look around while you're there.

Now of course, there's no JavaScript here. So when I click the buttons, nothing happens, but we'll get to that in a moment at the very end. First, though, if I scroll down, you'll see, of course, everything is still hard-coded. So you can actually structure your modals again in so many different ways for your application. You can use a single modal that you swap out the title and the body, or you could create any number of components like a Deactivate component, a Login component, and those all extend a MasterModal component. So again, so many ways to do it, and we can talk in the comments if you'd like. For now, we'll spit out the title, and then I think this is the default slot, right?

If we do want to make this somewhat dynamic, why don't we use Alpine since it's really easy to drop in. I'll just go ahead and paste in the CDN link here, and this is the latest version of Alpine 2. So yeah, now what I could do on the modal is declare, well, we do need a root. So let's do this. So let's do a top level div, where there I will set up our data, and we'll say whether the modal is turned on defaults to false. That way, for example, if we scroll down, if the user presses the cancel button, I could just say on is false.