0:00 All right, so now that we have our comments list displayed, 0:02 let's go ahead and 0:03 update to add our heart and favoriting functionality. 0:07 So beneath this JSX expression for the empty comments, 0:11 we're gonna have two closing divs, and outside of these two closing 0:15 divs, let's introduce a new div for the action 0:18 and like count. 0:20 So we'll go ahead and firstly assign some class styling to 0:24 this outer div, give it 0:26 a border top and padding four. 0:30 And now inside of the inner div, let's assign some flex 0:34 styling to this, and we'll have one more div with some 0:39 additional flex styling 0:42 and spacing. 0:44 And now inside of this div, let's add a new ghost button. 0:48 This is gonna be where we're gonna have the heart button to favorite the post. 0:52 So I'll go ahead and set this as a ghost variant, 0:56 give it a 0:58 size of icon. 1:01 And onClick listener, let's just set this to the 1:05 handleLike function, which we will go ahead and implement next. 1:09 We can also set disabled state to 1:11 likePostMutation, which we'll set up in a 1:15 second, and we'll s- hook this into the pending state for this 1:19 mutation, so when it is executing, we can't double-click it. 1:23 And then add some styling to it here. 1:25 So we have the heart button now. And inside, we'll actually 1:29 render the heart icon from Lucide React. 1:34 Now for the class styling here, let's open up a 1:37 JSX expression with a template literal, and we're gonna have height 1:41 six, width six. And then we'll check to see in a template 1:45 literal if post.isLiked, meaning we've already liked this 1:49 post as a user. Then we wanna go ahead and have 1:53 the class of fillRed-500, 1:57 textRed-500. 2:01 Else, we can just leave this as empty styling. 2:05 And so now outside of this div that we set up, let's add
The rest of the transcript is for members.
Sign in 