Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Tabs Layout
Loading...
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Complete source code for this lesson is available at
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.
