0:00 All right, so back in the story viewer component, 0:02 let's now go ahead and continue 0:04 it. Now outside our second most div, 0:08 still inside of the dialog content, I want to create our header 0:12 here. So let's add a new div and assign some styling. 0:16 Again, we're gonna make this absolute positioned. 0:19 Give it top four, 0:21 left zero, 0:22 right zero, Z twenty again, 0:26 flex item center, 0:29 justify between and PX four, PT two. 0:33 Give it some padding. So the first thing I want 0:35 is to render out the user 0:37 avatar image, so that we can click on that and go to their profile 0:41 eventually. So for this button, I'll add some styling as well. 0:45 Now we'll add the button click 0:47 functionality when we actually add our user profile later on. 0:51 Let's go ahead and now check to see on the current story group. 0:55 Well, remember we're populating this with the 0:57 actual user avatar just for this 0:59 functionality. So we can check to see if we have that. 1:03 Let's render our user image out. We can go ahead 1:07 and import this from next/image, and then we'll go ahead and add our 1:10 expected prop, including get add image URL, 1:15 passing the current group avatar as the URL, 1:19 and all the other props so we can have alt as the current group username. 1:24 I want a width of thirty-two and height of thirty-two, 1:28 and let's add some custom styles to it. 1:31 So I have the user image now complete. 1:34 Otherwise, if we don't have the user's avatar yet 1:37 because they haven't uploaded it, 1:39 let's add our typical user icon from Lucide 1:42 React, and I'll add some class names to both of 1:45 these. 1:49 All right, so go ahead and copy over these class names as well. 1:52 So now we'll have the user's avatar correctly rendered
The rest of the transcript is for members.
Sign in 