00:00 All right, we're going to take this slot stuff to the max because our toggle component currently has its own toggle context. But we could actually use slots for all of the stuff that we're doing in toggle context, right? We do have a label already. We have a switch. That could also be a slottable component.

00:17 It just needs a couple of specific props. And then we also have the text that shows up. We have the on text and off text. And those could be slots. And so Kelly, the co-worker, put together a couple slottable components. We have our text slot, which will take the responsibility of the text.

00:37 And then we have one for a switch, which will take the responsibility of the switch. The problem here, though, is that we're going to want to render two text components, one for when it's off and one for when it's on. So using text as our slot doesn't quite make sense. We need to have two different slots

00:56 that represent the two different types of text. So this is where the slot prop comes in. So when you're all done, we should have toggle rendering the slot provider, which it already is. But it should have props not only for label, but also for the switch and a slot called on text and another slot called off text.

01:14 And then each one of our slot components needs to be updated to allow for the prop slot to be supported. And then our use slot props can reference that instead of this default. So that is what you are going to be doing in this exercise is supporting that.

01:35 And then by the end of it, you can actually delete the toggle context entirely. So let's get into it.