0:00 We've extracted command classes to all of our buttons. Now we're going to tackle the Impact variant and handle styles for all possible variations. The Impact variant has three distinctive styles, Bold, Light and None. Our button has prop types here and the impact prop reflects these three possible values.

0:18 We've extracted the base classes in the variable as a string, and similarly we want to store the different possible class combination for the impact prop in a Tailwind sort of lookup directory. Instead of doing complicated ternary logic in the className attribute, what we want to do is have an object, a lookup object that has a key for each possible prop variants and then stores a string of the classes we want to apply for that variant.

0:44 All right, so here below our base classes you can see that we have an impactClasses object, and this object should have a key for each possible impact value, so Bold, Light and None. To help us provide the correct object shape, we're going to use a TypeScript record here. If you haven't used TypeScript before, don't worry, I'll explain to you what happens.

1:04 We define the type of these impactClasses as a Record, which is a series of key value pairs where the key is the ButtonProps ['impact'] . You can see if I hover over it that it tells us it can be "bold", "light" or "none". Those are the keys of our impactClasses object, and the values will be a string, which is a series of Tailwind classes.

1:26 Setting up that record type like so ensures that this object here will have one key for each possible prop variant. Your job in this challenge is to identify what classes are specific to the impact prop and then organize them for the Bold, Light and None variants inside these impact classes and then combine our base classes here with the impact classes.

1:49 You can see as a helper there is a little cx() function here imported at the top. It's a helper function that lets you pass multiple classes separated by commas and then we'll do the work to merge them together as one big string of classes.

2:02 You can use this to combine the baseClasses with our new impactClasses and our buttons down here should start taking the impact variant styles, getting a little bit closer to this and to what we're working towards.