Build a Fullstack Music App with Next.js Songs Table UI

Transcript from the "Songs Table UI" Lesson

[00:00:00]
>> So, the next thing that we'll get through is going to be the songs table. So, if we go and look at the design, it's exactly what it sounds like. It's a table that lists all the songs, right? And we wanna go to click on those songs or click this Play button here and actually play something.

[00:00:17] So, this is literally the main job of this music player. So, I wanted to do it last as we come full circle. I was gonna do this part first, but then I was just like, this is the hardest part. So, I don't know if I wanna start with that, it's kinda asking for a lot.

[00:00:32] So, saved it last. So, we'll jump right in and we'll make the song table, and then tomorrow as we continue on the player bar down here, and then we'll get this thing deployed. So, as far as the song table goes, if we just look at it, it looks like a pretty simple table/list.

[00:00:51] Its design aesthetic is the fact that it's minimal. Yeah, there's not really borders going on here, it looks really cool. And then you have this play thing up here, we don't have the ability to like and favorite things. So, we won't be adding that. That's one of the things that I said there'll be left, if you wanna continue working on this, you can add that, that'd be really cool.

[00:01:14] But we don't have the ability to do that now. So, what we'll do is we'll start working on this table as a separate component, cuz it's a little big. And then we'll bring it in the playlist page. So, let's do that. I'll head over to components, make a new component here.

[00:01:32] I'm gonna call it songsTable.tsx, And we'll start working on this thing. So, gonna import some things from chakra, let me see, what are we gonna need here? I know for sure we're gonna need a box, that's for sure, we use it all the time. But chakra also has some table primitives that we'll be using from the chakra react.

[00:02:00] And we want to use the table, the table head, the table, what does T stand for a Td in tables? I don't know, I know Tr is Table row. We got Tbody which is the table body. And then we'll use the IconButton for the Play button. So, Table, Thead, Tr, Tbody, and I think there's another one just like Th, I don't know the h stands for there, but we'll be using that one as well.

[00:02:37] Tables has so many pieces. So, we'll be using all of these. We're also gonna use some icons from react icon. The ones that I want to use are gonna be from react-icons/bs, I don't know what the bs library is. Let me go look it up, cuz they got some nice icons.

[00:03:00] I think bs is, that's Bootstrap, now that makes sense. These are Bootstrap icons, okay? Now, we're gonna use Bootstrap icons, I go back to the code, here we go it's gonna be called {BsFillPlayfill}. Yeah, PlayFill, there we go, okay? And then we got another one, that's gonna come from a different part of react-icons.

[00:03:30] I think that was gonna come from ai probably, yeah, Adobe Illustrator. And this one's gonna be the {AiOutlineClockCircle}. So, look at that. These two icons are specifically for, if we go back look at the design, the play one was for this play, and then clock is for this little one clock over here.

[00:03:58] That's what those icons are for. And eventually, we've got imports of other things as we format, there is a duration we wanna format. There is a bunch of things we wanna format, but we'll get to that as we keep moving. So, let's make the song table. SongTable exports default SongTable.

[00:04:24] As usual, I'm just gonna make a div in here that just says something, so I can add it to where it needs to be, to make sure it renders and then we can build it that way. So, I'm gonna put a div in here that says SongTable. We're gonna go back to our playlist id tsx page.

[00:04:37] I'm gonna get rid of this div that I have in between the gradient layout. And I'm gonna instead put the SongTable here. There we go. So, I got my song table here. So, I make sure that it's actually showing up. It looks like it is the text is just really gray, but it's right there, song table.

[00:04:59] Cool, so everything's rendering, let's make this thing beautiful, okay? So, for the SongTable like I said, it's literally going to use most of the table stuff here from chakra-ui-react. It's also gonna take in a list of songs, we might as well just take a prop for that. So, let's get that ready.

[00:05:21] And we can go ahead and start returning some things. So, I'm gonna wrap that table in a box, that way I can control its position. So, we'll say box, and I'm gonna make it transparent. So, I'm gonna say background ''transparent''. And the reason I'm doing that is cuz if you look at the design, it actually is transparent, I guess there's a lot of ways you can do that.

[00:05:42] You could have just made just this thing one solid color, and then make the table user gradient. But then I started scrolling down the page and I realized that like, no, there's no way that table could have been the gradient, because like I saw where it ended the page is actually the gradient, and the table was just transparent on top of it.

[00:06:01] So, we're gonna make it transparent. So, it's just like glass sitting on there, which is really cool. And then now we're going to make this section up here, so this play icon and things like that. So, we gotta start with that. So, for that we're gonna make a box-like so, we're gonna put some padding about 10 pixels probably, and add a margin bottom to separate those play controls from the song table beneath it.

[00:06:31] So, margin bottom of 20 pixels, we can play around with that number. And then we're gonna use the icon button, cuz we wanna be able to click on that play, self-closing like this. And the icon that we wanna use is going to be the law firm Bootstrap. So, to be {BsPlayFill} like that.

[00:07:00] I think we have to render it actually, so I'm do that. And then these icons actually take their own props to make them bigger. So, I'm gonna change the font size of this to be about 30 pixels, at least maybe bigger, will see. I'll save this sort of format.

[00:07:25] The sweet thing about these icon buttons from chakra-ui is that you can do a color scheme. So, instead of changing the background color, you could change the color scheme. And adjust the background and the color of the icon is really smart. So, I want this color scheme to be green.

[00:07:39] So, it'll pick the right greens for me, I want it to be a size of large maybe bigger, we'll start there. You can also say is round, which is really cool. If you want the icon to be round, so we're gonna say is round. And we'll do that, okay?

[00:07:56] So, what's this thing freaking out about? It wants the aria label. So, I had aria label, aria-label = ''play''. There we go. Cool, so we have that. Now I can go back look at our stuff, and we gotta Play button there, Pretty cool. Let's see what it looks like not on green.

[00:08:26] Looks pretty cool. Nice Play button. Any questions on that, on the icon button, laning the stuff out? Okay, keep it moving. Now we're gonna move on to the table. So, we'll use this table components, not to be confused with the native table element. So, make sure you're using the capital letters, because they're literally named the same thing as their HTML counterparts.

[00:08:56] So, make sure you're using the capital Ts and the lowercase ts. Visually it should make a difference, but I don't think you'll be able to do the styling like we do, so make sure you do that. For this table, you can actually add different variations. So, the variants that I want for this table is actually called ''unstyled''.

[00:09:12] By default they'll use a styled one that's got stripes and borders on it that looks gross. So, we're not gonna do that, we're gonna keep it unstyled to make it look more like a piece of glass. That's what reminds me of, like, this legit looks like a piece of glass on my opinion, right?

[00:09:29] I don't know, that's what I think I wanna see that. And then we're gonna use Thead like this. We're gonna add a border bottom to this. So, this Thead is gonna be this part here where the labels are, at the top for each column. So, that border is this border that you see here, that's why I'm adding this border.

[00:09:53] It's literally this border that you see here. So, we're gonna add a border bottom. And that'll be, we'll say, ''1pixel solid'' and then for the borderColor, I'm gonna say ''rgba''. And I wanted it to be semi-transparent white. So, rgba would be (255, 255, 255), which is white, but then 0.2.

[00:10:24] So, it's barely there, but there enough. And then for the table row, for the table head, we'll do the <Tr> like this and then for one row we'll use the <Th> like this. And that will be the number symbol, cuz that's what it has here, the number symbol on the left.

[00:10:47] So, what number track it is in the playlist, so that number symbol. And then we'll make another one <Th> and that will be the word title. So, the name of the song. And then next one would be date added. So, when it was added. And then the next one would be the clock icon.

[00:11:12] So, I think that one's like <AiClock, no, wait, <AiOutlineClockCircle>. That is it, okay? So, we'll do that, and it will save it. Okay, so we go back and look at this thing. Yeah, it's there. The obvious problem is that it's gray, so we can't read it. So obviously, we need to make this white.

[00:11:43] So, I'll just come up here at the top and I'll just say color white. There we go. Now we can see it. It's like the border bottom is not there, I misspelled solid, I put sold. There we go. Cool, looking good. I feel like we need some more margin underneath this button.

[00:12:11] I feel like it's too close. So, add some more margin bottom somewhere, let's see. I don't have a containing element between the button and a table. So, I like to do a margin bottom. Let's see, where's this thing close? Okay, so what I need to do is wrap this button in a box, so I'll do that.

[00:12:34] And then I can add a margin bottom to this box. I guess I could just add it to the button. I just prefer to add it to something containing the button than the button itself. We could do 20 pixels there. There we go. Maybe more, 30? Sure. There we go.

[00:12:51] That's a lot better Check out a different color, make sure it looks good on different colors. Surprising like white looks good on all the colors, cuz I think by time the grading gets down here. It starts to get darker, so the white actually pops up very nice. So, that work out pretty good.