Swapping Components Exercise

[00:00:00]
>> So your job is to kind of pick one of these that you're kind of interested in doing if you're tired of input fields. We can also do with notifications in the various colors as well. Let's do notifications. Let's break for an exercise. You can even start with this base component here that has like a little layout grid.

[00:00:16]
And what we wanna do is, this is our base version, you can even give it an obnoxious color if you want, right? Turn this into a base component, go ahead and make the four kind of instance that we can swap between, so we can drag in all the different kinds of notifications, swap it to a different one and we'll do some extra stuff with it in a little bit as well.

[00:00:37]
Like I said, as kind of extensions, there are a whole bunch of other things that you can do here as well. Like a lot of it is just playing on the same theme as well like, instead of hover and focus, we have the ability to input fields. And you can see that I started out with an input field that has required an error message and a label and you can actually just make more and more instances we delete more and more pieces.

[00:00:59]
So it's like you're gonna have not every variation for an input fail because like there's more than you ever think there should be. But like you can begin to build up a robust components that using the same strategy just kind of like doing it repeatedly and kind of building up on top of itself more that we won't learn additional things and doing it that many times but the strategy works.

[00:01:18]
So it's kind of an exercise outside of today if you wanna kind of just Just take a little bit further. There are a whole bunch of extensions that you can follow along and do as well, but why don't we do the notification because we'll build on it in a little bit, and we'll see the strategy in action.