Adding Comment Form 0:00Now that we are displaying a series of comments, of course, the next step is to add a form at the top to post your own. So let's go back to the show page for a post. And yeah, right down here at the bottom is where we display each comment. Maybe before that will be our form here. And we'll talk about the action a little bit later, because there's a couple different ways we could structure that. But yeah, to get started, let's add a border around this. Maybe border, and actually, once again, we're going to reproduce what we had here. So I'm going to copy this, and then at the end of the video, I think it's time to extract a component for styles just like this. Paste that in. Okay, so maybe we'll have some kind of header that says,Paste that in. Okay, so maybe we'll have some kind of header that says, Want to participate? And let's see what that looks like. Yeah, so we have a little box there. Maybe we should also have the user's avatar. So why don't we grab this little bit of code we had earlier, and we'll paste it at the top. And then we should set this to flex. And yeah, let's see how that's looking. Oh, we forgot to update this.And yeah, let's see how that's looking. Oh, we forgot to update this. If we want the current user's ID, you could say auth user ID, or there's also a auth ID method you could use as well. There we go. Okay, but now it's too big. Why don't we change this to, and again, this is a candidate for a component. And let's make it a complete circle. Yeah. Next, I want the text centered.Yeah. Next, I want the text centered. So let's do align items center. And then a little space after the avatar. So we could do that on the h2 or the image. We'll do margin left, maybe three. Just kind of spitball in here. Yeah. Okay, so next, we're going to have our main text area. This is where you leave your comments. Building Textarea Input 1:52Okay, so next, we're going to have our main text area. This is where you leave your comments. Let's see how this looks out of the box. It's a little hard to see, but if I focus it, notice it doesn't extend for the full width. So let's add maybe right here, width full. Okay, but then next, it's right bumping up against the header. So on the parent div, let's add a margin top. I'm not sure. That's maybe too much.I'm not sure. That's maybe too much. We just want to push it down a ways. And then we should have a placeholder, shouldn't we? So we'll say placeholder quick. Think of something to say. Okay, that text is too big. Let's bring it down. Text small. Yeah.Text small. Yeah. Next, I don't love this styling. When you focus, you could remove it. People are going to get mad at you, though. So why don't we replace it with one of Tailwind's rings, which I think just uses a box shadow to make it a little more attractive. Okay, finally, at the bottom, this could be a footer. Let's just leave it like this. I want to have a button. Styling Submit Button 3:07Let's just leave it like this. I want to have a button. It'll have a type of submit, and this will be to post the comment. Okay, so let's do this. I want to sell this in the browser. Makes it a little more enjoyable. I can add the class here. And let's just play around. How about a background of blue? Text white.How about a background of blue? Text white. Maybe uppercase. Font semi-bold. How about text? I don't know. Extra small. And then padding on the top and bottom. And a good bit more on the left and right, yeah? And then finally, or maybe not finally, we'll make the borders rounded.And a good bit more on the left and right, yeah? And then finally, or maybe not finally, we'll make the borders rounded. Actually, I think that looks decent. Do we already have... Let's see. Did I already do this? I don't think we already have a button component. Okay, finally, if you hover over it, let's set it to a slightly darker shade of blue. As you see there. Okay, decent enough.As you see there. Okay, decent enough. So I'm going to copy all of that and paste it in here. Finally, on the wrapping div, we'll set a display flex and justify end. And that'll push everything to the end. Especially if we have more than one button at some point. There you go. Okay, but once again, notice it's bumping right up against the text area. So yet again, why don't we add some margin top? And you know what?So yet again, why don't we add some margin top? And you know what? Maybe we want a border there. Let's see. Border top, border gray 200. Yeah, and then maybe padding top. Again, notice it's all just kind of spitballing. There's no exact number here. Yeah, but you know what? That text area is too much.Yeah, but you know what? That text area is too much. So let's get rid of calls and maybe bring rows down to five. Yeah. And then finally, maybe this margin top is a little too much. And then let's put the padding top next to it. Yeah. And you know what? I think this is good enough for our needs. So let's finish up the video by extracting that component I was talking about. Extracting Panel Component 5:15I think this is good enough for our needs. So let's finish up the video by extracting that component I was talking about. So notice on our form here, this thing, we have a border. It is gray 200. There's some padding and it's rounded. But notice it's the exact same thing probably in a few different areas of the blog. Specifically, I noticed it here. Border, gray 200, padding six, rounded Excel. So if you find yourself repeating those styles over and over every time you need what is, what do we call it?So if you find yourself repeating those styles over and over every time you need what is, what do we call it? A card, a box, a panel, any of these will do. Why don't we call ours? What do you think? Box, panel, let's do panel. So I'm going to create a new component in the components directory called panel. This will be a div. And notice what I'm going to do here is just grab all of those repeated styles and move them up here.And notice what I'm going to do here is just grab all of those repeated styles and move them up here. And then I'll spit out the initial slot. So actually, real quick on this note, you're probably thinking, well, why not just extract a CSS rule called panel? Why do we create a blade component instead? And the answer is you can do whatever you want. Of course, extracting a CSS class would be very common. But if you're working with utility CSS and Tailwind, I think you'll find that this is a very typical solution and approach.But if you're working with utility CSS and Tailwind, I think you'll find that this is a very typical solution and approach. Ideally, we want to write as little traditional CSS as possible. Again, if we're taking this approach. But yeah, do whatever you want. So now notice I can get rid of all of this. And if I come back just to show you, we will lose that styling. But we're now going to add it back by wrapping all of this within our new panel component. And indent. Okay.And indent. Okay. And now notice it's back. So check this out. If we now go to our post comment, I no longer have all of this repetition that we had here. So get rid of it. Those are now gone. But we can replace them again with our panel. And there we go. But now notice we have a new problem. Supporting Component Attributes 7:17And there we go. But now notice we have a new problem. Because we have some padding on the panel itself, when we apply this background color to a comment, well, of course, it stops just short of where that padding ends. We should probably instead apply that background color here. Or I'm sorry, 100. But now notice it's still not going to take effect. Yeah, it's gone. And that's because if you want to accept attributes,Yeah, it's gone. And that's because if you want to accept attributes, your component has to explicitly accept them. So as you've learned now, we're going to say attributes. But let's set a default class like so. And I'll let you take a look at that. So echo out any attributes the user provides. But I want the initial class to be this. But you can extend it if you need to. Okay, so now if I give it a refresh, we get that working.But you can extend it if you need to. Okay, so now if I give it a refresh, we get that working. And actually, you know what? I think we might want to bring that color down just a touch. Yeah. Okay, so now we've removed a little bit of that repetition. And further, if there's anywhere else on the site where we have a panel, we can now switch over to that. Okay, so with the design of our form out of the way, in the next episode, let's actually make it function.Okay, so with the design of our form out of the way, in the next episode, let's actually make it function.
