Create and Edit a List Component to Match Design Guidelines in Next.js 13
Now that we have data displayed on our home page, let's display that data in a more user-friendly format.
We have a List component from our template that maps over the data and displays titles that match the design of the site but we can modify this to give a preview of the post.
We'll truncate the summaries, reformat dates, and style the component to achieve a more cohesive look.
Instructor: [0:00] We want to leverage our list component, so that the data from Strapi matches the design of our application. In our file explorer, open Components, uncheck list component.
[0:13] We notice that our list component takes in an AllPosts prop that we then use to populate our list. In page.js, we'll get rid of this block and import our list component, list from component/list. Right below Description, we'll say, Lists, and pass the prop AllPosts, and then say data, and then close.
[0:43] When we save, our list of posts from Strapi now match the design of the rest of our application. However, the titles of our posts aren't enough. I'd like to add the author as well as a summary of the posts, and the date that they were published. To do this, we need to edit our list component.
[1:04] Open our list component and at the top of lists, we find a function called truncate summary. We'll have content as an argument and then we'll return content.slice and we'll get the first 100 characters and trim the end. That is the first function that we use to truncate our summary.
[1:28] Our second function will be used to convert or rather reformat our date to match a format that is more human readable. We'll pass in full date and then say const date is equal to new date and in that, we'll pass our full date. We'll return date to date string and slice and save. Now, right below link, we want to add AP tag that says buy.
[2:01] We'll copy this. We'll pass in our author on and then pass our reformat date function. In that, paste our posted attributes dot date. When we save this, we see our author and the date that our post was made right below the title, which is great.
[2:25] Below our H2, we want to have our summary, and here we'll say truncate summary. In that, we'll pass our body and we'll wrap it in tildes and add three dots at the end of our summary, and we'll click Save. Now we see our summary in white.
[2:47] The styling doesn't necessarily fit the design of our application, so we'll change that. In our p tag here, we'll say, class name is = ml6, we'll say, pbl four. Then we'll add the black text, as well as make the leading normal, make the text this and have a max-width of xl, and save. We see our post summary changes and that looks much better.
[3:26] We do the same for our author. We'll say, class name, we'll make the text black, text this and have font be semi-bold, save. However, we want our author to stand out. We'll go into our span here and say, class name, and just change the font color to red and say text. Red, 500, and save. That looks much cleaner already.
[4:05] That is how you create and edit a list component in your Next.js 13 application that uses the app directory.