0:00 All right, so let's continue building out our post 0:03 modal. 0:04 I'll head back into the post modal component. 0:07 And so 0:08 outside of these two divs that we've created for the 0:12 post modal image, let's go ahead and create a new div, and 0:16 this is gonna be for the actual content. 0:19 So we'll have a new class name for here, and I'll assign some flexbox 0:23 styling and some background as well. 0:28 And so now on this section, we'll first add a header. 0:33 So I'll add another flexbox to center everything 0:39 and add a border. 0:41 And now with inside of this div, I'm firstly gonna add a new 0:45 button. Then we are going to add a button 0:49 component, and this is going to be a ghost button, 0:53 so that we don't actually show it, but we want the child itself to be 0:57 clickable. And so this button later on, we'll add an onClick listener 1:01 to be able to click on it and then go to that user's profile page. 1:05 And like we'll update the rest in our application. 1:08 For now, let's just leave this as an empty button, 1:12 and we'll come back to 1:12 it. 1:13 I'll also add styling to it. So I'll add a 1:17 class name. 1:19 And so I've set up some classes on the ghost button now. 1:22 And so now with inside of the ghost button, let's do our usual check to see if 1:26 the post user avatar is defined. 1:30 Then we're gonna go ahead and render out the user's avatar, 1:34 and we'll 1:34 use our typical Next.js image component, pass in 1:38 our source of get image URL with the post 1:42 user avatar. Alt text, I'll pass in the user, 1:46 username, and then I'll set a width and height 1:50 of forty pixels on this. 1:57 And finally, a class name 2:00 set with ten height, ten rounded full
The rest of the transcript is for members.
Sign in 