Simon Vrachliotis: 0:00 Let's take it step by step and start with the title prop. Right now, it's saying Confirm subscription, and if I scroll down the text is here. In my index page here, I will add a title prop with "Helloooooooooo." Before it works, I need to implement that, so let's replace the hardcoded text with {title}. Nice, I'll change this to "Confirm subscription."

0:28 Next, I want to implement the whole body copy here, and if I scroll here, you can see that this here is the body, so I'll copy this whole div right there and here we would use the children prop.

0:41 Right now, we should have an empty body, so instead of having a self-closing modal component I will have an open and closing modal tags, and in here I will paste the whole markup that I've copied. With a bit of luck, we have our modal copy once again.

0:58 Beautiful, the last piece of the puzzle is our actions here and you can see TypeScript is telling me that we're missing the 'actions' prop. Let's give ourselves a little bit of space here. The beauty of TypeScript is it will tell us what we can and must use.

1:12 Let's start with the confirm action. It needs a label, "Yes please!" and for the action we'll have a function that for now just closes the modal so setIsOpen(). Let's also add a cancel action. The label here will be "No thanks." and for the action we'll do the same, a function that sets the IsOpen prop to .

1:38 None of that is implemented yet because it's still hardcoded in the modal component. Let's go there, scroll down to find the action buttons, there they are. The first button here is the Confirm action so the text can be actions.confirm.label, and you can see I don't even have to type. The action instead of just onClose will be actions.confirm.action.

2:05 You can see that now the button says Yes please! And when I click it, it will close the modal. Nice. We can do the same with the cancel action. onClick we want to fire the actions.cancel.action, and the label will be actions.cancel.label.

2:23 Beyond that we only want to show this button if there is an actions.cancel object passed in the actions prop, so let's check here if actions.cancel and if that's the case render our button. Let's hit Save and now we're expecting our buttons to say Yes please! And No thanks, and sure enough they do. Great stuff.

2:45 This is awesome, and now I promise we can go and implement the multiple style variants with Tailwind CSS.