00:00 All right, I'm really excited to talk with you about compound components. These are spectacular. I love this pattern. Here, I talk about this pattern in general, give you some background. You can think of a compound component as the HTML select and option components. By itself, select is useless.

00:18 By itself, option is useless. But together, they're very useful. And they share some implicit state between each other. And that's precisely what we build when we create these compound components. So often, we end up building components that are a bit like this, and there are some serious problems

00:35 with the flexibility and capabilities of components when we build them like this. So compound components are a great way to solve this problem. And in each one of these, I'm gonna show you some real-world projects that use these patterns. So feel free to jump in to Reach UI because that's a great example of components that use the compound components pattern.

00:54 And I'll give a hat tip to Ryan Florence who taught me this pattern. And I think it is splendid. So here for our exercise, we're actually gonna be using the same component for most of the rest of the workshop here. And that is a toggle component. We are going to drastically overcomplicate this toggle component

01:13 just for you to learn these patterns with a simple component. But just know that these patterns, everything that you're going to learn have been implemented in real-world projects. And it is super awesome. You can take a look at each one of these to get an understanding of how these patterns apply to more real-world scenarios once you have an understanding of how the pattern works.

01:32 So for our first exercise, our goal here is to create a set of components that works like this. So we have a toggle, we have a toggle on and off, and then a toggle button. And if you go to the final version, we just render that text based on whether the button is on or off. And so this toggle component

01:51 needs to share some state implicitly with each one of these components. And that is your goal. The emoji should help you out quite a bit. And definitely don't forget to read through the background and exercise information and do not skip the extra credit because this one's going to be fun also. We'll see you on the other side of the exercise.