00:00 In this exercise, we have a class names map here, and this class names map basically takes in a variant as the key and returns a bunch of Tailwind class names as the value here. And what we're doing here is in some button props, or this button component here,

00:18 we're basically mapping the class names map with props.variant, meaning we don't need to parse in all of these class names every time, we can just parse in the variant. So that means down here that we can get autocomplete for all of our variants, which is very, very nice. But it also means that we don't need to parse in these class names every time.

00:37 But there's something that's a little bit dodgy here. We have primary, secondary and success up here in the class names map, but we also have it typed down here in the variant. And this works, there's no errors here, but wouldn't it be great if you could actually rearrange this

00:54 so you don't have to manually sync all of the types? Now, there is a method to do it, and it's going to involve turning this runtime value into a type. So when we add a new one up here, it will just automatically flow down into the button component below. You'll need typeof and keyof,

01:13 and it just involves changing this type here. I think I've given you enough hint for you to get started. Good luck.