00:00:02 In this lesson, we'll develop this tabs layout for the profile page that either shows the list of questions, answers, or tags.

00:00:11 Looking at the design, it's not super clear exactly what this does, but if you head over to the ShadCN tabs component, you'll see exactly how it works.

00:00:20 You can click on it, and it changes the view that you're seeing.

00:00:24 So let's go ahead and install it by running mpx-shadzian-add-latest-add-tabs.

00:00:30 I'll do it right here in our second terminal.

00:00:33 And then we can copy this basic use of the tabs.

00:00:37 I'll copy it from the usage and head over into the profile details page.

00:00:43 Right below the stats, we want to render another section that'll have a class name equal to margin top of 10 to divide it a bit from the stats,

00:00:52 a property of flex, and a gap of 10. Within it, I will simply paste the usage of the tabs.

00:01:00 And of course, we need to import them.

00:01:01 Looks like I missed one step when installing it.

00:01:04 I gotta say why.

00:01:05 Yes, go ahead and install it.

00:01:06 And then we can say use legacy peer depths to get it into our code base.

00:01:11 If you do that properly and paste it one more time, it is possible that your editor will auto do all of the imports for you.

00:01:18 If it doesn't do that, you can copy it from ShadCN as well.

00:01:22 Oh yeah, and it got them from Radix UI, but it's better if you get them directly from the components.

00:01:27 So that's forward slash components, forward slash UI, forward slash tabs, because that's where ShadCN stored them.

00:01:36 So if you do that, immediately, you will have this way to switch between account and password, which is looking great.

00:01:43 But of course, we want to make it work with questions and answers.

00:01:47 So let's make the default value of top-posts and let's give it a class name of flex- and then 2 in square brackets.

00:01:58 And really make sure that you imported this from UI components and not from Radix.

00:02:03 This is necessary for it to work.

00:02:04 And as you saw, the editors sometimes tend to do the auto imports from Radix.

00:02:09 To the tab list, let's also give a class name of background-lite800.

00:02:16 dark 400, a min-h of 42 pixels, and a padding of 1. We'll have two tabs triggers.

00:02:25 One will have the value of top-posts, and the other one will have the value of answers.

00:02:32 So let's make them say that.

00:02:33 This one will say top-posts, and this one will say answers.

00:02:38 And for both of these, we can give them a class name equal to tab, which will give it a bit of a different layout.

00:02:46 If you search for tab in the globals.css, you can see exactly which styles does it provide.

00:02:53 We apply a full height, a dark background, and then we look when it is activated, and then we apply this primary color.

00:03:01 We can switch between the two and you can see exactly when each one is active.

00:03:06 Next, we need to display the tab's content.

00:03:08 So the tab's content, when the value is top-posts, it'll have a class name of margin top of five, flex, w-full, flex-call,

00:03:22 and a gap of six.

00:03:23 And later on within here, we'll display a list of questions.

00:03:27 And now we want to duplicate that tab's content one more time.

00:03:32 This time, the value will be answers.

00:03:35 We can leave this the same, but without the margin top.

00:03:38 So I'll just say flex, wful, flex call, and a gap of six.

00:03:42 And here we want to display a list of answers.

00:03:45 Finally, below the tabs, we'll display a div that'll have a class name equal to flex, wful, min-w of 250 pixels, flex of one,

00:04:01 Flex call and MaxLG hidden.

00:04:05 So we want to display those tabs layout, which is happening on the right side.

00:04:10 If we have some space to show it, we can render an H3 there that'll say top tags.

00:04:16 And we can give it a class name, H3 dash bold, text dash dark 200, light 900. And below it, we can render a div that'll have a class name of margin top

00:04:28 of seven.

00:04:30 flex, flex-call, and a gap of four.

00:04:35 And within it, we can render a p tag that'll for now simply render a list of tags, text.

00:04:41 Later on, of course, that'll be real.

00:04:44 So now if you check it out, on mobile, we just have top posts and answers, which render a list of questions or list of answers.

00:04:52 And if you head over to desktop, you can also see the top tags on the right side, but not the popular tags in general throughout the entire application.

00:05:01 But here we'll display the top tags that that user is participating in.

00:05:07 So it might even make sense to call it top tech because that user is proficient in that technology.

00:05:14 Perfect.

00:05:14 That's it.

00:05:15 Pretty simple to create a layout using these tabs.

00:05:18 Usually it will take us hours to do something as nice and as functional as this one.

00:05:23 But as you saw, Shatsyend makes it super simple.

00:05:27 So let's go ahead and commit and sync it.

00:05:30 I'll call it implement tabs layout, commit and sync.

00:05:36 And in the next lesson, we can actually show the list of questions that the user has posted.

00:05:42 So let's do that next.