Dynamic Modal Sizes
We have a new size prop for the Modal component that can be small, medium, or large.
Our goal is to dynamically apply the appropriate max width container class depending on the prop value.
The Dialog.Panel inside of the Modal component is where we'll be applying the max width contain
Transcript
Instructor: 0:00 We have this new size prop which can be "small", "medium" or "large". We want to populate our sizeClasses object and add a max-width container for each. Before we do that, let's understand what element we need to style with these classes.
0:12 We have a Dialog component with the background overlay. The place we want to apply a max-width container is the Dialog.Panel here. Specifically, we have this small breakpoint class max-w-lg. To me this is the class that we need to make dynamic with the sizeClasses object. Note that there is no max-width container by default. It's only applied from the small breakpoint and up.
0:35 We have this small breakpoint and up specified, so let's go and populate this object. I'll scroll down a little bit. Ctrl-space to toggle the options. Let's start with small. Here we want at the small breakpoint max-w-sm. For the medium size at the small breakpoint, we'll have max-w-lg, and for the large we'll have small max-w-2xl.
0:58 All right, now let's go make the class dynamic. I will make the whole className attribute here use the cx() function, and I will delete this max-width container at the small breakpoint. Instead, we will reach for the sizeClasses object and get the dynamic value of the size prop, just like we've done before.
1:20 Let's verify that it works. Small modal. Yep, that looks pretty small. Medium and large. Good work.