feat(components): Create LessonTabs

[flacial]

Related to #2029

Description

For each lesson sub-page such as exercises, mentor exercises, challenges, and lesson, we create a the NavTab in all of them. To keep it DRY, this PR create a component that'll be used in all of the lesson pages.

Before:

const tabs = [
  ...(currentLesson.docUrl
    ? [{ text: 'lessons', url: currentLesson.docUrl }]
    : []),
  { text: 'challenges', url: `/curriculum/${currentLesson.slug}` },
  { text: 'exercises', url: `/exercises/${currentLesson.slug}` },
  {
    text: 'mentor exercises',
    url: `/curriculum/${currentLesson.slug}/mentor/`
  }
]

  <NavCard
    tabSelected={tabs.findIndex(tab => tab.text === 'exercises')}
    tabs={tabs}
  />

After:

<LessonTabs lesson={lesson} activeTab={'exercises'} />

Testing

1. Go to /exercise/js0
2. Confirm switching between the tabs work

[vercel]

@flacial is attempting to deploy a commit to the c0d3-prod Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
c0d3-app	✅ Ready (Inspect)	Visit Preview	Oct 6, 2022 at 2:50AM (UTC)

[codecov]

Codecov Report

Merging #2394 (ba48999) into master (f3dd09d) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master     #2394   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          184       185    +1     
  Lines         3286      3285    -1     
  Branches       874       872    -2     
=========================================
- Hits          3286      3285    -1     

Impacted Files	Coverage Δ
pages/exercises/[lessonSlug].tsx	100.00% <ø> (ø)
components/LessonTabs/LessonTabs.tsx	100.00% <100.00%> (ø)
pages/curriculum/[lessonSlug]/mentor/index.tsx	100.00% <100.00%> (ø)

[SlyBouhafs]

Might as well add this path to the constants.

[flacial]

The exercises shouldn't be under /exercises but something like /curriculum/js0/exercises.

[SlyBouhafs]

Yes, i also think the mentor path needs a bit more thought!

[anthonykhoa]

The exercises shouldn't be under /exercises but something like /curriculum/js0/exercises.

@flacial Can you explain your reasoning on why the above should mean that we shouldn't make a /exercises constant?

[flacial]

I thought /exercises/js0 would make things inconsistent with the way we manage things that are related to a lesson (e.g, challenges) and thus it should be changed to something like /curriculum/js0/exercises. But it appears the lesson submissions are under /review/js0.

I'l create one for /exercises in a different PR as this is merged.

[anthonykhoa]

I thought /exercises/js0 would make things inconsistent with the way we manage things that are related to a lesson (e.g, challenges) and thus it should be changed to something like /curriculum/js0/exercises.

I'm not understanding the reasoning -- even if the path is /curriculum/js0/exercises, why do you think a /exercises constant should still not be made for that?

[flacial]

I thought /exercises/js0 would make things inconsistent with the way we manage things that are related to a lesson (e.g, challenges) and thus it should be changed to something like /curriculum/js0/exercises.

I'm not understanding the reasoning -- even if the path is /curriculum/js0/exercises, why do you think a /exercises constant should still not be made for that?

I decided not to add that constant because, based on the possibility of introducing inconsistency in how we manage things that are related to a lesson, we could change the exercises' paths before launching DOJO. I was wrong as we already have the /review/[lessonSlug] path.

[anthonykhoa]

I was thinking that since we are going to need /exercises in the path it would be a good idea to make the constant anyway(which I see you note you'll do in another PR). Whether the path is /curriculum/js0/exercises or /exercises/js0 it needs /exercises. The reason I think /exercises should be a constant is because of its high potential for reusability -- if you search the path /curriculum for example, you can find a lot of results of its usage,
https://github.com/garageScript/c0d3-app/search?p=4&q=%2Fcurriculum

[flacial]

I like this idea. By creating the exercises constant, we can join constants to create paths like the following CURRICULUM_PATH/[lessonSlug]/EXERCISES_PATH.