00:00:02 Now we want to display the stats, such as the total number of questions and answer answered or asked by that user, as well as some kind of badges that

00:00:10 the user has received based on some kind of reputation.

00:00:13 I'll tell you a bit more about the logic of assigning those badges in the next module, where we can discuss the topic of reputation.

00:00:20 But for this lesson, let's just do the UI.

00:00:23 First, let's head over into the global.d.ts.

00:00:28 And let's define a badge count by creating a new interface of badge counts.

00:00:36 And we'll have gold, which is going to be a number, silver, which will be a number, and bronze, which will be a number as well.

00:00:44 Now we can create a new component within the components folder.

00:00:48 And let's put it within user and let's call it something like stats.tsx.

00:00:54 Run RAFCE to create it and then import it within our profile details page.

00:01:00 So that is profile ID right at the bottom below the current section.

00:01:04 So to do that, we have to wrap everything in an empty react fragment and close it below the section as well.

00:01:12 And here we can open up the stats component coming from components, user stats.

00:01:18 And to it, we'll pass the total number of questions and answers alongside the badges, which for now, we can hard code to gold zero,

00:01:29 bronze, and silver zero as well.

00:01:32 Later on, we'll pass the real values.

00:01:36 So now let's head over into the stats component and let's get it implemented.

00:01:40 First things first, we'll accept the props you're passing into it, such as the total number of answers and questions, as well as the badges object.

00:01:50 These will be of a type props, so we can define them right here at the top.

00:01:55 Interface of props.

00:01:57 And we can render the total number of answers, questions, and badges, which will be of a type badge counts, which we defined as a global interface.

00:02:08 Now we can create this layout by giving this div a class name of margin top of three.

00:02:15 And within it, we can create an age four that'll simply render the word stats.

00:02:22 We can give this h4 a class name of h3-semi-bold, text-dark 200, light 900, and below it, we can render a div that'll have a class name equal to margin

00:02:37 top of 5, grid, grid-cols, dash 1, so one column, with a gap of 5, And on extra small devices, grid calls 2. And on medium devices,

00:02:52 grid calls 4. So this is the first time I think we're actually using grids.

00:02:57 Or I might be mistaken because we're using flex so often.

00:03:01 But this stats cards is the perfect example for using grids.

00:03:05 So let's develop a div within it.

00:03:09 That'll contain a p tag.

00:03:11 Within which, we'll render the format number utility function, to which we'll pass the number of total questions, just like this.

00:03:20 And to this p tag, we can give a class name of paragraph-semi-bold, text-dark 200, light 900. And below it, we can render another p tag that will simply

00:03:35 say questions, and we can change its class names to body-medium, text-dark 400, and light 700. Now we can see three questions.

00:03:48 We can also duplicate this div right below, and we'll change it to format total answers, as well as right here, we'll say answers.

00:03:59 Perfect.

00:04:00 So this user has three questions and three answers.

00:04:03 In your case, you'll most likely get some kind of different numbers.

00:04:06 Now we want to display these cards right here.

00:04:08 This is only the first card, but now we'll have a second one, third one, and a fourth one as well.

00:04:14 So we can first wrap the question and answers into a card in its own.

00:04:18 I'll create a new div right on top of the current one, and I'll make sure to close it properly right here at the bottom.

00:04:25 And I'll give it a class name.

00:04:28 equal to light dash border, background dash light 900, dark 300, flex, you can see how it's starting to look like a card,

00:04:42 flex wrap, items dash center, justify dash evenly, gap of four, rounded-md, border, padding of 6, shadow light of 300, and on dark mode,

00:04:59 shadow dark of 200. And there we have our card.

00:05:05 Now we can copy this entire div because that's what forms our card.

00:05:09 And I'll create a reusable stats card by saying const stats card is equal to a function that automatically returns a div that has those class names.

00:05:22 So let me actually create it right here.

00:05:25 There we go.

00:05:26 And within it for now, I'll simply render stats card.

00:05:30 And now we can use it a couple of times to show those badges below.

00:05:33 So I'll head one and two divs down.

00:05:38 And here I will create our first stats card.

00:05:43 And to it, I'll pass an image URL equal to forward slash icons forward slash gold dash metal dot SVG with a value of the number of gold medals.

00:05:56 So badges that gold and a title equal to gold badges.

00:06:01 Now we can duplicate this two more times.

00:06:05 The second time it'll say silver, silver and silver.

00:06:12 And for the last time, it's going to say bronze.

00:06:15 Bronze and bronze medals here as well.

00:06:20 Perfect.

00:06:21 So now we can see three different stats card.

00:06:23 Let's actually make each one look a bit differently depending on the props that we pass into it.

00:06:28 Right at the top, I will destructure the image URL, the value, and the title.

00:06:34 And these will be of a type stats card props.

00:06:38 So we can define an interface right here of stats card props where we get an image URL of a type string, a value of a type number,

00:06:47 and a title of a type string.

00:06:49 So let's render that image by using the next image tag, and I'll pass it a source equal to image URL, an alt tag equal to the title,

00:07:02 and a width of about 40, and a height of about 50. If you save it, you should be able to see three different metals.

00:07:11 Below it, I'll render a div.

00:07:14 And within that div, I'll render a p tag that'll render the value.

00:07:18 And below it, I'll render another p tag that'll render the title.

00:07:21 There we go.

00:07:22 Let's style them.

00:07:23 I'll give the first p tag a class name of paragraph-semi-bold.

00:07:29 Text-Dark 200, Light 900. And for the second one, I'll give it a class name of Body-Medium, Text-Dark 400, Light 700. There we go.

00:07:45 And I think I misspelled the gap right here of 4, which is gonna just give it some additional space.

00:07:50 And for this card, I'll use a justify start.

00:07:54 There we go.

00:07:55 So now this is looking great and it looks even better on desktop.

00:08:00 So we have questions three, answers three, and zero badges because we haven't yet implemented the reputation system.

00:08:06 So now if I head over to community and if I check Adrian, you'll see that he has zero answers and questions.

00:08:13 And Sujata here also has zero and zero badges, but it's good to know that it shows up on all different profiles.

00:08:20 Next lesson is quite interesting.

00:08:21 We'll implement the tabs layout.

00:08:24 This layout right here that allows us to switch between the top posts and top answers that the user has given, as well as show the top tags that the user

00:08:33 has participated in.

00:08:34 So let's do that next.

00:08:35 Right after we commit our current stats part.

00:08:39 So I'll say implement stats UI.

00:08:43 commit and sync, and let's focus on the most significant part of the user profile.