A Brief Tutorial on Building the UI for a Blog Comments Section

[00:00 - 00:09] In this lesson, we'll add a simple UI for the commands. We already fetch commands on the front end, and now it's time to show them nicely in the application.

[00:10 - 00:19] For the styles, we're going to use Tailwind. It's a CSS framework that provides many easy-to-use CSS utility classes.

[00:20 - 00:32] Our block example comes with Tailwind setup out of the box, so we're ready to start with the UI. First, we're going to alter the JSX in the post component right after the post body.

[00:33 - 00:38] That's where we'll add the comments list and the form. Let's do it step by step.

[00:39 - 00:48] We start with a section for the comments. I will add a section component and apply the same styles that post body has.

[00:49 - 01:02] I will use a utility class which stands for Max with 36 RAM and Max Margin X Auto. Right now, we fetch all the commands, so the number of the commands is an array land.

[01:03 - 01:16] In the next module, we'll be working on pagination and we'll have a separate count variable. Anyway, we'll add an H3 element with a bold text and text color as gray 500.

[01:17 - 01:27] Feel free to customize it and change. As the next step, we'll map through the comments and for each, we'll create an article element with background color gray 100.

[01:28 - 01:38] We'll also add rounded borders, vertical margin and padding. Inside, we'll have information about an author and comment creation date.

[01:39 - 01:48] This element will have a bold font and margin button. The last thing we need to do is add a paragraph element with the content.

[01:49 - 01:58] I'm going to make the text slightly lighter than the rest of the page. I'm also going to format the date so that it's in more readable form.

[01:59 - 02:08] I will use built-in function tool or call date string. The last step is handling loading state.

[02:09 - 02:23] I'm adding a ternary operator and whenever loading variable is true, I will show loading comments text. I'm going for super simple option here.

[02:24 - 02:36] Feel free to add a spinner or some animation to indicate that the comments are loading. In the meantime, I added a few entries to the database so we can open the page and see how it looks.

[02:37 - 02:47] Now let's move on to the form for adding new comments. We don't have the logic for adding the comments, but that doesn't stop us from handling it in the UI.

[02:48 - 02:56] It will actually be easier to test adding the comments when we have the UI ready beforehand. So let's start with state variables.

[02:57 - 03:03] We need to save the state of the form. We'll declare two state variables in the post component.

[03:04 - 03:10] One for the author's username and one for the comments message. Next, we'll add a form component.

[03:11 - 03:22] In the onSubmit function, we'll do two things. We'll use prevent default on the event, which will stop the form from automatically submitting when the sub-mid button is clicked.

[03:23 - 03:35] Thanks to that, we can submit the form data as inharnously and perform some logic like making it an API call. We'll also add a console lock to print the username and the comment.

[03:36 - 03:44] It's only for now and later we'll replace it with an API call to the tasura instance. Next, we'll add an input for the author's username.

[03:45 - 03:50] I will create a label and input component. For the label, I will provide the following styles.

[03:51 - 03:57] The first one is display block. The second one is setting the text color to gray 600.

[03:58 - 04:13] I will also use a smaller text size than the rest of the page and will use text -sm. I also want the font to be bold and a slight margin button.

[04:14 - 04:26] I'm also adding a rounded border to the input and set its width to 100%. Finally, let's wrap it into a div and set the bottom margin for it.

[04:27 - 04:36] Inputs uncharged function will set a corresponding state variable username. Now let's do something similar for the comments content.

[04:37 - 04:50] We'll use the same styles, so I will actually copy paste what we have and change a few details. Instead of input, we'll use the text area and we'll also use the set comment function.

[04:51 - 05:01] The last part of our form is a sub-mid button. I'll make its background color to purple 700 and purple 600 on hover.

[05:02 - 05:09] Text color will be white and bold. I will also set vertical and horizontal padding and make the button rounded.

[05:10 - 05:17] Now we have the whole form component. Let's see how it looks in the browser.

[05:18 - 05:24] Okay, nice! We have the whole UI part covered. In the next lesson, we'll go back to our hook.

[05:25 - 05:42] We'll implement the part responsible for adding new comments and instead of console logs, we'll have a PA course in our form. See you in the next lesson. And feel free to post here for a bit and customize the UI by adding your own styles.