Build a Fullstack Music App with Next.js Gradient Background & Image Box

Transcript from the "Gradient Background & Image Box" Lesson

[00:00:00]
>> We had the data fetching from the custom hooks that calls the playlist API function that we created so we can populate the playlist list on the sidebar. So got all those things working in unison, talking about the cookie that's saved in the browser that's set up on a request that is checked with our validate routes.

[00:00:22] Higher order function which gets a playlist. And yeah, all that just works and then we're able to actually see this, the homepage and stuff. Because of our middleware that allows us to because we are signed in and then our forms are working, so all is good. Now what we wanna do, just to get some more things done is to work on the homepage and actually get that going so we can start work on the playlist and actually have some music playing.

[00:00:48] So what we'll do now is go over to our notes where we have the designs and figure out what if we can make some components here. So if we're looking at the homepage, it kind of looks very similar to the playlist page. So this is what a playlist page looks like.

[00:01:08] It's got a list of songs, homepage looks very similar. It just doesn't have a list of songs, but it's got this gradient at the top with this other little panel at the bottom. So what I wanna do is just make a component that is basically the layout for this page, cuz we're gonna reuse it on a playlist page as well.

[00:01:27] So we'll make that component and then we'll get the user using our use me hook to populate the user here. Maybe we'll run another database migration, add a user, first name and last name so that that'll look cool. I don't know if we had an avatar for the users, we might run another migration for that as well.

[00:01:45] So we'll do that, that'd be really cool. I'll add an avatar and then we'll put some artists down here, which I also don't think have avatars, so we can add avatars for that. So a lot of stuff happening here. But it's nothing new that we haven't done already, so we'll just go back and do it.

[00:01:58] Let's do it. So first things first is that components. So let's make this gradient page component is what I'm gonna call it cuz we're gonna reuse it. So let's head over to our code, we'll make a new component here and I'm just gonna call it gradients layouts.tsx. So we'll do that.

[00:02:20] And it's going to import a box and a flex and a text. We are gonna use text now from at chakra. I guess you could import all these from layout or react, I don't know, I was gonna do layout. And we're gonna import, there is an image component from @chakra/react, not to be confused with the image component from next image.

[00:02:54] I know, it's all the same, but this one's different. Their image components, let's take a look at it, chakra UI. I'm using their image component because, one, it's got Dan Abram off on it so yeah, why not. But no, it's just a lot better for what I think is like photos and avatars whereas like the image component from next JS is better for optimizing art and everything's like that.

[00:03:26] So they both have their own benefits. We're gonna use the image component from chakra UI, because I think it's gonna work better with the avatar. So we will do that. Yeah, so here we go. And then basically I'm just gonna make a component gradient layout. And this component because it's a layout, it's definitely gonna take some props.

[00:03:49] So we got to kind of think about how do we make this thing flexible and the way we can do that so if we go back and look at the design. So yes, it's the same on both pages but it's also different. So let's look into, and the way you know what options to take is, what's the different data on the screen?

[00:04:08] So if we look at this, we have two different image. So we probably had to take like an image prop, we have two different titles here. So we're gonna take a title prop. We have two different, whatever you would call that, a subtitle. So we'll take a prop for that.

[00:04:23] We have a difference. I don't know, description maybe. So we'll take a prop for that cuz it's different down here as well. And then we have what looks like a different color, obviously this one's grey, this one's red. So we'll take a prop for color, and then the whole page underneath it is completely different.

[00:04:42] As far as the content goes, so we'll probably just use children for that, and that'll just be like, you can render whatever the hell you want down there, doesn't matter. But we do wanna make sure that we do the coloring and the gradients right. So those are all the different props we'll take because that's the only thing that's different, everything else is the same.

[00:04:57] So, that's kind of how I think about URL. I'll look at the similarities and like, okay, what data is different? Well, that all that different data needs to be a prop, and that's how I do it. So for the gradient layouts, we're gonna do some of those props.

[00:05:10] So I talked about the color, so we'll have color here. We talked about children rendering that page on any, that was gonna be anything. We talked about the image so we'll do that, we talked about the subtitle. So we'll have subtitle here, or it's subtitles just one word, yeah, it's one word.

[00:05:30] And then we have the title, then we have the description. And then the other thing is that this one's a round image and this one's not a round image, so I think we'll have another prop for round image. So that way this thing is super flexible. So those all the props that we'll take.

[00:05:54] And then we'll just return some JSX. So we'll turn a box here. And this is gonna be a full page box. So we'll just say height is 100vh and then that's pretty much all we need to do there. And then for the overflow, we'll put overflow y of auto, so it scrolls we want that to scroll.

[00:06:20] And then next thing is like trying to figure out the gradient. So luckily for us, Chakra UI has a really cool built in gradient mechanism here. So we're gonna make a gradient here. And we're gonna say we want a linear gradients and we want it to be starting at whatever color they pass in as a prop.

[00:06:43] So we want that color.500, because remember what chakra we can do the colors.100 all the way up to 900. So whatever color you pass me on, when I get the 500 value which is somewhere in the middle of that color. And Chakra comes with gray, blue, green, orange, yellow, pink, red, purple.

[00:07:02] So parsing one of those colors, we'll start at the 500 variation of that, which is right in the middle. And we'll say do that at 0%, so start with that. And then the next step in the gradient will be the same color, and we'll probably bump it up to be a little darker which will be like .600.

[00:07:23] And we'll do a, somewhere around 15% of that somewhere. And let me see, that sort of fixes it, there we go. And then the next one will be basically the same color again. But even darker, so 700 version of that, and that'll go to 40%. And then from there, if you go look at the design, it kind of just fades to black or to almost black, not quite black.

[00:07:53] So for that one, I'll say I'll use RGBA here, and I'll do black which is 0000. But for transparency of almost there, but not quite 0.95, and I'll make that come up to 75% So that'll be our background gradient. So whatever color at 500 is 0%, then 15% down through the whole page, start this next color, at 40% down to the homepage, start this next color, and then at 75% down on the page.

[00:08:34] So only a quarter left to start this almost black color. So, hopefully that'll look good if not we'll fix it. And then instead inside this box, I think what we'll do is probably just do a flex. Cuz if we go back here, we got one thing on the left, and it's one thing here on the right, so we'll just flex, we'll flex that.

[00:08:56] So we'll do a flex here. And then for this flex we'll give this a background color of the same color that they passed in. But for 600, so we'll say color.600. And that's gonna give us this darker switch right here. So if you go look at the red, its goes bright red, bright red and boom, it kind of just goes dark a little bit.

[00:09:22] That's what's gonna do that, it's gonna give us that right there. So we got our flex 600 there, and then we'll add some padding to this. You can play around with this number, I'm just gonna do 40 pixels. And then I'm going to align at the end. And the reason I'm aligning at the end is, if you go look at the design, is this text right here is at the bottom, right?

[00:09:50] If I didn't align at the end, it'll actually be at the top, it'll be up here. If I align at the end, it'll push it down here. So align is vertical, justifies x. So if I align at the end, it'll put the text at the bottom, if not, it'll be at the top.

[00:10:04] So that's why I'm doing that. Go back to our code. So we got the flex there. And then I was gonna put a word here so we can actually render this thing out and see what it looks like, then we can kind of build it while we're looking at it.

[00:10:21] So we have that, and then I'm just going to put that there like that. Hello, so we got our gradient layout. So now what I'm gonna do is I'm gonna go to our index.tsx inside the pages. And we're gonna use the gradient layout in here, right? So I can get rid of this div.

[00:10:44] I don't know why I just did that. So we got our gradient layouts here. I'm gonna give it a color of red and then I'll just say, I'll just put a div for now, homepage, something like that. And this thing's freaking out because obviously I didn't parse in all the other stuff, so hopefully it still renders, hopefully typescript just allows us to render it without it fulfilling the props.

[00:11:16] If not, we'll fill it out and we'll do it, but I just wanna see on the page, right click, so let me run this. There we go, so we got a nice little gradient, layout looking thing here, looks pretty cool. The one thing to notice though is that the homepage is coming over the player bar, right?

[00:11:43] We don't want that, we want it to stop, so we got to fix that. And the way that we can do that is pretty much the same way we did it for the sidebar which should be in the player layout. So if we look at the player layout.

[00:12:00] So we're counting for the margin left for 200 pixels, but for what we do with the sidebar here, right? So for the sidebar, where are we doing that? And then we're doing that somewhere, there we go, Calc, here we go. So see how we're calculating the height here to be 100vh- the height of the bottom bar for 100 pixels will do the same thing.

[00:12:24] And there's many places we can do it, we could just do it here in the gradient layout if we wanted to I guess. But then we had to do it somewhere else, it's probably better just to do it somewhere in here. We might even just take this and wrap it in another box like so and then add children.

[00:12:42] And then here we can say, height is 100vh or calc 100vh- 100 pixels. Okay, and well we didn't again I guess that was that wouldn't matter because I just made the gradient layout 100 VH. So I guess that wouldn't matter, so I would have to actually put that back and then make gradient layout like 100%.

[00:13:15] I think that might work, there we go, yeah. There's a lot of ways you could have done that. We could also just put that calc right here in the gradient layout. But then again, if we had a different layout for a different page, we don't have to do it somewhere else too.

[00:13:29] So in the player layout, I just did the calc here, 100vh- 100 pixels. Then wrap the child in that, and then integrating layouts, I just made the height 100% of whatever that is which will be here Okay, and just to make sure that the color works, we can go back to the index page and I can put in another color like blue and here, gradient should work the same no matter what I paste in.

[00:14:12] Okay, back to the gradient now, we'll actually start making staff look cool. So we got that, the next thing we're gonna do here is make a box for the image, big image there on the profile. So we'll say box, and then we'll use that image tag that we imported from chakra.

[00:14:35] Actually, let's put some padding on this box I guess. Always add some padding, that'll be 20 pixels. And then for this image, it's going to take a box size. So how big you want this to be. You can play around with this. I think I found 160 works pretty good, it's big enough.

[00:14:52] And then you can add a box shadow and there's different sizes for that. I went really crazy to 2xl, so I did 2xl there. You could check out the API for Chakra to see the different values you can put there or you can just hover over boxShow and it'll tell you.

[00:15:07] So you can see, could you the base outline small, medium large xl to xls, so I put 2xl, the biggest shadow, we'll see if it looks tacky or not. Usually big shadows look tacky, but I think it looked pretty good on this design. And then for the source, we'll actually just put an image.

[00:15:21] So whatever that is, and then border radius this is where the rounding comes in so, is there a border radius? Well, it depends, is it a, what did I call the prop? Round image, so round image, that's true, or not. So if that is true then we will do a border radius of 100%, so fully circular.

[00:15:43] If not, we'll just give some rounded edges which will be like three pixels. So that'll give us an image. If we want, we can test this, we can just go get an image and put it here and you can check it out. But this is good enough, this little board I think kind of show you the image looks like.

[00:16:00] And then if I wanted to make it round and go back here, right, I could say, round image. And just like that, just put round image, and then now it's round.