Let's carry on with the implementation of our feed. And in this lesson we're going to focus on the individual post. All right, so we got the post prompt and we are now going to implement this individual post. As you can see, it has a very similar setup where there is a flex parent that will contain the avatar and then the rest of the ui. So basically this part here and this part here is going to be exactly the same.

So basically this part here and this part here is going to be exactly the same. Uh, but we are going to wrap our posts in an ordered list since they appear in a specific order. So let's start with that. I'm going to collapse the post prompt. And below that we are going to have the feed. So this is going to be an ordered list and I'll give you the class oft-dash-4 to create separation.

and I'll give you the class oft-dash-4 to create separation. And inside of there each post is going to be an li item. So like we've done before, we going to make this a flex parent and we are going to vertically align items with items-start. And what gap did we give before we had a gap of 4? Okay, so let's do the same gap 4. And inside of there, once again the first child is going to be an anchor tag going to be profile page.

And inside of there, once again the first child is going to be an anchor tag going to be profile page. And inside of there, we're going to have an image. This time we are going to use ade.png. And once again we're gonna give it a class of size-10 and object-cover. And like I did before, we also going to give a class of shrink-0, except this time I'm going to make sure that I spelt it correctly. Okay, let's check what we've got so far.

that I spelt it correctly. Okay, let's check what we've got so far. And yep, so far so good. We have adult's avatar. And so here we are now going to have the post content. So we're going to have three stacked sections. The first one is going to be the username, the meta information, and the options menu here. Then we are going to have the actual post content and then some action buttons at the bottom. And all these three parts are going

and then some action buttons at the bottom. And all these three parts are going to be wrapped in a common flex chart. All right, so after the anchor tag, let's have a div which is going to contain these three different parts. I'll have a div that wraps all of these items together. So here div, it's going to separate this section and the menu button here with space between. So let's give it a class of flex justify

and the menu button here with space between. So let's give it a class of flex justify-between uh, let's add items-center and give it a gap of 4. And so inside of it we are going to have a div with the meta info. And then we are going to have the options menu. Oh, I guess dot, dot, dot. Okay. And just like before, it is not using the full width, so we need to make this flex child grow.

And just like before, it is not using the full width, so we need to make this flex child grow. So here, class equals grow. Yeah, that should do it. All right. And we are gonna keep that as a placeholder for now we going to have the paragraph here, so I'll copy the text. And so below our meta information here we'll have the content. And so I'll have a paragraph with the text in my clipboard. Okay, and finally we're going to have a setup here,

And so I'll have a paragraph with the text in my clipboard. Okay, and finally we're going to have a setup here, which is very similar to the one on top. So there is a space between container that separates both. So I am going to copy that. And after the content bit we are going to have the action buttons and I'll paste that here. And basically here we are going to have the actions and on the right we are going to have the share options. Alright, and I think

and on the right we are going to have the share options. Alright, and I think that's the overall structure of our posts. Okay, let me make the paragraph text a little bit smaller and add some margin-top to it. And then we'll take care of this section here. So I think on the div here, I will have a class of T4 and text-sm. Yep, that's looking much nicer. And imagine that we had two paragraphs in a row right now

Yep, that's looking much nicer. And imagine that we had two paragraphs in a row right now there wouldn't be any spacing in between. So one thing that I could do is make that div here, a flex flex-col container and add a gap of say 3 so that if there's multiple paragraphs or different elements, there's going to be a nice vertical break between each. Alright, great. Let's also add some margin-top on the action.

to be a nice vertical break between each. Alright, great. Let's also add some margin top on the action buttons container. So down here, empty six, let's try that. And yeah, it's taking shape already. I really like this. So I will remove the second paragraph here. So this one, and now let's go focus on this part, which is supposed to show the username how long ago the post was posted. And the handle, it looks like this is going

how long ago the post was posted. And the handle, it looks like this is going to be text-sm and the opacity is going to be 40% for these two. And then the main text is going to be 100% opacity and text-base, so we don't have to add any classes to that one. All right, so let's scroll up to this meta information here. And so inside of there, let's have <p> tags for each.

All right, so let's scroll up to this meta information here. And so inside of there, let's have paragraph tags for each. So I think the username should link once again to the profile for that User. Adele. Next we'll have another paragraph tag. Like I said, this one is going to be text-extrasmall and text-pixel-light at 40% opacity. And it's going to say two hours ago. And we'll duplicate that and have the @adele or its add-l handle.

And we'll duplicate that and have the addDash handle. Although once again this could be an anchor tag that goes to the profile like so. Okay, that's looking good. Now we want to align them in line and vertically centered and that's super easy to do with flex. So on the common parent here, class flex gap, uh, maybe 2 and items center. And check this out, this should be looking pretty good,

and items center. And check this out, this should be looking pretty good, although maybe the gap is a little bit bigger, eh 10 and 10, so 2.5. Okay, let's do that. So here the gap will become 2.5 and yep, I'm happy with that. So let's add some hover styles for the links. Maybe for this one we can underline the text. And this one we can change the opacity like we've done here. So for the first one, hover underline.

And this one we can change the opacity like we've done here. So for the first one, hover underline. And for this one here, hover text-pixel-light at 60% opacity. And you know what? Uh, maybe the text classes should be also here on the anchor tag instead of the p tag. Doesn't really matter, but it's kind of odd to have the base color on the p tag and then the hover color on the anchor tag.

to have the base color on the pt tag and then the hover color on the anchor tag. Okay, so how are we doing on hover gets underlined and this one gets a little bit more bright. Cool. Next, let's go and fix these options menu button. And if we inspect closer, we really have three four by four squares with a three pixel gap between each. So we could make that an SVG, but we can also create it with three elements. So let's try that. Let's turn this into a button which will

but we can also create it with three elements. So let's try that. Let's turn this into a button which will have a class of flex gap of three pixels. And inside of it we are going to have three span elements. So they are four by four, so they'll have a class of size 1, which is four pixel by four pixel. And so let's triplicate this and see what we've got. Whoops, we've got nothing because I haven't given it a color. So for all three here, let's go BG pixel

because I haven't given it a color. So for all three here, let's go BGPixelLight at 40% opacity. Yeah, okay, that works. Now this button will not have any text label because we just have visuals, so we need to give it an area label of moreOptions or maybe postOptions. So again, we won't see a label, but screen readers will. Okay, and like we've done here, I want to increase the opacity on hover,

Okay, and like we've done here, I want to increase the opacity on hover, but I don't want to do it on each individual square. When I hover the button, I want all three to change color. And so the way I can do this is give the button a class of group and then for these three buttons I'll copy the class. On group hover, we are going to apply the same color but set it to 60% opacity. So the button has a class of group.

but set it to 60% opacity. So the button has a class of group. So whenever we hover the entire button, these three span elements because of group hover will change the background opacity to 60. And as a result, when we hover the button, you can see the color change. But you might notice that I have to go right against the elements

But you might notice that I have to go right against the elements because the actual height of the button is literally just the height of the three squares. So to make this button a little bit easier to reach, we might want to increase its vertical footprint by adding some vertical padding, maybe py-2. So now the surface area of this button is bigger and it's also more noticeable when I tab onto this button.

So now the surface area of this button is bigger and it's also more noticeable when I tab onto this button. Nice. Alright, and with that solid we can next move to the actions button down at the bottom here. So for the left actions down here we are going to have three groups. So that's definitely a flex container with a gap between each. And then each group will have a button with an SVG icon.

with a gap between each. And then each group will have a button with an SVG icon and then a count value. And we won't worry about the yellow just yet. This is probably the active state. Uh, if I scroll down, I should find another one. Yep, where they're all white by default. And then if the current User has liked the Post or shared it or commented on it, this should be yellow instead. But for now we are going to focus on getting the main

or commented on it, this should be yellow instead. But for now we are going to focus on getting the main structure right and then we are going to bring the three icons to the mix. And this is where we are going to do our damage. So we are going to have like comment and share or repost. So this is going to be a flex container, flex item center gap four, yes, thank you. And in here we'll have a button like and then a count.

flex item center gap four, yes, thank you. And in here we'll have a button like and then a count. Let's go 23. And again these two needs to be wrapped in a div so they can be the same flex chart. So I will copy this structure two times and change comment and repost just so we can check the overall structure that we've built. And yeah, in essence, this is exactly what we want. Nice. So let's do some inspection. The count values will be text-sm because they're 14 pixel.

So let's do some inspection. The count values will be text-sm because they're 14 pixel. So for these three, let's go span class="text-small". Next, I feel like the gap is even bigger. So we got 33, so I guess 32 was the intention. Yeah, 32. So it's actually a gap of eight. So let's bump the gap here to eight. Okay, nice. And then between the count and the icon, there might actually be less. You can see five, so maybe four.

and the icon, there might actually be less. You can see five, so maybe four. So it could be gap of one only. And so actually I have not set that as a flex container, but these three Ds here should also be flex items center and gap of one. Alright, and that's looking a bit close like this, but once we have the icon instead of the text, that should work nicely. So let's also do the right side. So what have we got there?

that should work nicely. So let's also do the right side. So what have we got there? Okay, so we have two icons. There is a gap of 12 pixels or gap three, and then the save button has the actual save text. Okay, so I feel like I can steal the structure that we've got here. And so these are our three buttons on the left. And then on the right we are going to have two of these, but these are going to be called save.

And then on the right we are going to have two of these, but these are going to be called save. And the label here is going to say save. And this one is going to be called share share icon. And this one actually does not have a meta information. So as of now they will be stacked on top of each other. Yep. So on the parent here, we'll give it a class of flex items center. And remember we had a gap of 3 because we saw 12 pixels between the two.

And remember we had a gap of three because we saw 12 pixels between the two. And the last thing I wanna change is here the text seems to have a color of text-pixel-light at 40% opacity. How are we doing? I think really good. So now we can go and replace the five action buttons with five icons. Okay, so let's start with the like button here. And so inside of the button, instead

Okay, so let's start with the like button here. And so inside of the button, instead of having the text like which by the way will set as an aria-label, we will have the SVG that I'll paste. So if we go here, you can see that there's a view box of 2017, so the width is 20. So we can give you the class of w-5, which is 20 pixel width. And that should work quite well. And alright, yeah that looks nice.

And that should work quite well. And alright, yeah that looks nice. Alright, let's do the comments next. So I will collapse the like button and then in the comment area label equals comment. And here I will paste the SVG same viewBox for this one. So class equals w-5, good stuff. And let's do the repost. So one more time, collapse the button, go find the next one, add the aria-label of repost and paste the SVG instead.

add the area label of repost and paste the SVG instead. Same view box one more time. Perfect. So class equals w-5. And here we go. This is taking shape, so we'll do the same on the other side this time. This is for the save button area label equals save. And I believe this one has a different view box. Yep. So the width here is going to be 3.5 instead plus equals width, 3.5.

So the width here is going to be 3.5 instead plus equals width, 3.5, which is 14 pixels. Okay, that works. And finally we have the share button. Let's do that one real quick button area label equals share. And the SVG here will also have a different viewBox. Hmm, here let's go w 19 pixels arbitrary value and basically I've set the width on each but all had the common value of 17 in height. So I really should have set height to 17 pixels to all.

but all had the common value of 17 in height. So I really should have set height to 17 pixels to all of them and that would ensure they're always the same size. And actually I'll do that real quick, so sorry about that. For the like button, I'll change these to height 17 pixels and I'll go do this for all of them since they always have the viewBox height of 17 repost. And then we have the save button here, also 17 and the share button finally like so. So now every icon will have exactly the same height.

and the share button finally like so. So now every icon will have exactly the same height and that is looking pretty good. Let's maybe have hover styles for these. So on hover, maybe we make them the highlight color or the pixel color. So here's what we should be able to do. I can add a class on the button and go hover:text-pixel, but this is not going to work because the fill color here is hardcoded on the group here.

but this is not going to work because the fill color here is hardcoded on the group here. So what I need to do is change the hard coded color here to currentColor. And so this is going to inherit the parent color. And now if I hover the heart, yep, it's getting yellow. Nice. Let's do the same for the other buttons. Class hover, textPixel, and then here the group will have currentColor. Okay, and one more time on the repost class.

and then here the group will have currentColor. Okay, and one more time on the repost class equals hoverTextPixel. So here there's multiple fields, so basically everyone that has the field of e, e, E, there we go. We'll change all of these to currentColor and this should work once again. Very cool. Let's also do the same treatment for these two. So the saveButton, class, hoverTextPixel, this is a group, once again, great currentColor.

So the save button, class, hover, text pixel, this is a group, once again, great current color. And one more to go the share button plus hovertech pixel and the field group will be current color and we should be all good. Very cool. So let's take a look at our posts. We have nice tapable buttons and the hover states are looking pretty good. I'm quite happy with that. I am sure we could improve this, but this is definitely a pretty good baseline.

I'm quite happy with that. I am sure we could improve this, but this is definitely a pretty good baseline. Just wanna handle the separator here. So this is present in every post, including if I go right to the bottom, the last one here. And so we are not going to use a divide utility but rather have a border bottom once again. And the other interesting thing is that this border does not go all the way flush to the left, but it only aligns with the right section.

that this border does not go all the way flush to the left, but it only aligns with the right section of the child container. So basically we are going to have a border bottom on this element here that contains everything we've done. And so we need to scroll all the way back up. Let's collapse the action buttons here. So we see clear the paragraph and here we have our meta information.

So we see clear the paragraph and here we have our meta information. And so basically this is the avatar and then this with the class of grow is everything else. So here we want to add a border B class and again sets border pixel light at only 10% opacity. This is going to be too close to the action buttons. We want to add some gap. So what do we have here? 20. So let's try that PB 5. And yeah, this is looking good. So let me duplicate the post to see how they stack together.

So let's try that php five. And yeah, this is looking good. So let me duplicate the post to see how they stack together. After all, it's an ordered list as you can see here. So I will collapse the li and replicate the entire post with a second li. And as I was expecting, we also need some padding-top on each li item so they stack nicely. The spacing here seems actually quite minimal. It's only 10. So let's try that. On the li item here, I will add a PT

The spacing here seems actually quite minimal. It's only 10. So let's try that. On the li item here, I will add a pt of 2.5, which is 10 pixels. Okay. And so that works with the avatar, but this feels too close to the separator. And I think what's happening is, as you can see, we've calculated the 10 pixels from the avatar, but it looks like we have some vertical spacing before the start of the meta information here. And so it's not quite vertically aligned with the avatar.

before the start of the meta information here. And so it's not quite vertically aligned with the avatar, but we have a paddingTop of 10 once again or nine I guess. And so this is right here where we have the borderBottom, the chart that contains everything except the avatar. We can also have a PT of 2.5 and I think that will set it up just right. And you know what? This feels too much because there's also the lineHeight involved. So let's try PT of 1.5.

because there's also the line height involved. So let's try pt of 1.5. And yeah, so I think this works great. I'm going to also add this pt 1.5 on this element, which is the first one. So in the collapsed li here I will find this element and go pt 1.5. And all right, I think this is looking really good. We now have one little problem is we've added a padding-top of 2.5 to the second element and each subsequent,

We now have one little problem is we've added a padding top of 2.5 to the second element and each subsequent, but we don't want to add it to the top. So what I'm saying is here we have this padding top, you can see the green bar of 2.5 to separate from the separator here. But on the first one we don't have that. So we could leave the padding top here and then reduce the what do we have margin top on the ol that would work, but we could also be fancy here.

and then reduce the what do we have margin-top on the ol that would work, but we could also be fancy here and use the first-child selector. So first column, PT 2.5. And let's make sure the other li also has this first PT 2.5. And let me collapse this. So this should actually do the opposite of what we want. It should only apply the padding-top to the first child. But let's test this and if it works, we can reverse it with not first.

But let's test this and if it works, we can reverse it with not first. Alright, so we have our two items and it looks like it's working as in it's doing the opposite of what we want. So the first ally item has the padding applied, and then if I scroll down, the second one has no padding applied because it's not the first. And so here we can inverse the logic by saying not first.

because it's not the first. And so here we can inverse the logic by saying not first. And you can see it'll target the elements that are not the first child, which sounds perfect. And he also not first. And this time the first element will not have the padding tub. But the subsequent one, as you can see here, will, which is exactly what we wanted. And as a result, this is looking very, very nice,

which is exactly what we wanted. And as a result, this is looking very, very nice, just like we want. Alright, I am sure that there are a lot of things that we can improve on our Post and no doubt we'll circle back to it as we add the replies, the reply form, the responsive adjustments. But for now, this is a really good baseline and we are going to move on. Speaking of replies, let's tackle the replies section next.

and we are going to move on. Speaking of replies, let's tackle the replies section next.