Skip to content

Commit 8ac7fa4

Browse files
serapieTuyishimeserapieTuyishime
committed
refactor: use a reusable component for the community navitem
1 parent 978a9e9 commit 8ac7fa4

File tree

5 files changed

+52
-35
lines changed

5 files changed

+52
-35
lines changed

‎src/components/sections/communities/overview/LearningMaterials.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Community } from "@/types/community";
66
import Loader from "@/components/ui/Loader";
77
import { IRootState } from "@/store";
88
import { useTranslation } from "next-i18next";
9+
import CommunityNavItem from "./_partials/NavItem";
910

1011
interface LearningMaterialsSectionProps {
1112
community: Community;
@@ -26,11 +27,12 @@ export default function LearningMaterialsOverview() {
2627

2728
return (
2829
<>
29-
<div className="md:hidden my-8">
30-
<div className="font-medium text-.5xl leading-snug">{t("communities.overview.learning-materials.title")}</div>
31-
<div className="text-sm font-light lg:w-full lg:pr-7 pt-2">{t("communities.overview.learning-materials.description")} </div>
32-
</div>
33-
<div className="grid gap-3 md:gap-6 mb-3 md:mb-6">
30+
<CommunityNavItem
31+
title={t("communities.overview.learning-materials.title")}
32+
description={t("communities.overview.learning-materials.description")}
33+
className="md:hidden my-8"
34+
/>
35+
<div className="grid gap-6 mb-6">
3436
{courses?.map((course) => {
3537
return <CourseCard
3638
key={`learning-card-data-${course.id}`}
@@ -43,7 +45,7 @@ export default function LearningMaterialsOverview() {
4345
/>
4446
})}
4547
</div>
46-
<div className="grid md:grid-cols-2 gap-3 w-full">
48+
<div className="grid lg:grid-cols-2 gap-3 w-full">
4749
{learningModules?.map((module) => {
4850
return <LearningModuleCard
4951
key={`related-learning-card-${module.id}`}

‎src/components/sections/communities/overview/Sidebar.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useSelector } from "@/hooks/useTypedSelector";
2-
import Link from "next/link";
2+
import CommunityNavItem from "./_partials/NavItem";
33
import { useRouter } from "next/router";
44
import { useTranslation } from "next-i18next";
55
import classNames from "classnames";
@@ -50,35 +50,34 @@ export default function Sidebar(): JSX.Element {
5050

5151
return (
5252
<div className="flex flex-col md:divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
53-
<Link href={links.mainLink}>
54-
<div className={isActive(links.mainLink) ? "" : "text-tertiary"}>
55-
<div className="font-medium text-.5xl leading-snug">{t("communities.overview.challenges.title")}</div>
56-
<div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.challenges.description")} </div>
57-
</div>
58-
</Link>
59-
<Link href={links.learningMaterialsLink}>
60-
<div className={classNames("pt-6",
53+
<CommunityNavItem
54+
url={links.mainLink}
55+
title={t("communities.overview.challenges.title")}
56+
description={t("communities.overview.challenges.description")}
57+
className={isActive(links.mainLink) ? "" : "text-tertiary"}
58+
/>
59+
<CommunityNavItem
60+
url={links.learningMaterialsLink}
61+
title={t("communities.overview.learning-materials.title")}
62+
description={t("communities.overview.learning-materials.description")}
63+
className={classNames("pt-6",
6164
{
6265
"text-tertiary": !isActive(links.learningMaterialsLink),
6366
}
6467
)}
65-
>
66-
<div className="font-medium text-.5xl leading-snug">{t("communities.overview.learning-materials.title")}</div>
67-
<div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.learning-materials.description")} </div>
68-
</div>
69-
</Link>
68+
/>
7069
{hasCurrentCommunity && (
71-
<Link href={links.scoreboardLink}>
72-
<div className={classNames("pt-6",
70+
<CommunityNavItem
71+
url={links.scoreboardLink}
72+
title={t("communities.overview.scoreboard.title")}
73+
description={t("communities.overview.scoreboard.description")}
74+
className={classNames("pt-6",
7375
{
7476
"md:block hidden scroll-smooth": isActive(links.scoreboardLink),
7577
"text-tertiary": !isActive(links.scoreboardLink)
7678
},
77-
)}>
78-
<div className="font-medium text-.5xl leading-snug">{t("communities.overview.scoreboard.title")}</div>
79-
<div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.scoreboard.description")}</div>
80-
</div>
81-
</Link>
79+
)}
80+
/>
8281
)}
8382
</div>
8483
);

‎src/components/sections/communities/overview/_partials/NavItem.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Link from "next/link";
2+
3+
export default function CommunityNavItem({ title, description, className = "", url = "" }: { title: string; description: string; className?: string, url?: string }) {
4+
const Component = url ? Link : "div";
5+
6+
return (
7+
<Component href={url} className={`grid gap-4 ${className}`}>
8+
<div className="font-semibold text-xs leading-3.3 uppercase tracking-3">{title}</div>
9+
<div className="text-sm font-light lg:w-full lg:pr-7 ">{description} </div>
10+
</Component>
11+
)
12+
}

‎src/components/sections/communities/overview/scoreboard/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useTranslation } from "next-i18next";
55
import { ReactElement, useState } from "react";
66
import Loader from "@/components/ui/Loader";
77
import EmptyState from "@/components/ui/EmptyState";
8+
import CommunityNavItem from "../_partials/NavItem";
89

910
/**
1011
* Scoreboard Overview index component
@@ -26,10 +27,11 @@ export default function ScoreboardOverview(): ReactElement {
2627

2728
return (
2829
<>
29-
<div className="md:hidden my-8">
30-
<div className="font-medium text-.5xl leading-snug">{t("communities.overview.scoreboard.title")}</div>
31-
<div className="text-sm font-light lg:w-full lg:pr-7 pt-2">{t("communities.overview.scoreboard.description")} </div>
32-
</div>
30+
<CommunityNavItem
31+
title={t("communities.overview.scoreboard.title")}
32+
description={t("communities.overview.scoreboard.description")}
33+
className="md:hidden my-8"
34+
/>
3335
{loading ? (
3436
<div className="h-full w-full grid">
3537
<Loader className="place-self-center" />

‎src/pages/communities/[slug]/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import MetaData from "@/components/ui/MetaData";
1717
import LearningMaterialsOverview from "@/components/sections/communities/overview/LearningMaterials";
1818
import { fetchCommunities } from "@/services/community";
1919
import { GetStaticPathsContext } from "next";
20+
import CommunityNavItem from "@/components/sections/communities/overview/_partials/NavItem";
2021

2122
export default function Slug(props: {
2223
pageProps: {
@@ -32,10 +33,11 @@ export default function Slug(props: {
3233
<MetaData community={community.name} title={t("communities.navigation.courses")} description={community?.description} />
3334
</Head>
3435
<CommunityWrapper>
35-
<div className="md:hidden">
36-
<div className="font-medium text-.5xl leading-snug">{t("communities.overview.challenges.title")}</div>
37-
<div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-8 md:mb-0">{t("communities.overview.challenges.description")} </div>
38-
</div>
36+
<CommunityNavItem
37+
title={t("communities.overview.challenges.title")}
38+
description={t("communities.overview.challenges.description")}
39+
className="md:hidden my-8"
40+
/>
3941
<div className="grid gap-6">
4042
{challenges.map((challenge) => (
4143
<ChallengeCard key={challenge.id} data={challenge} community={community} />

0 commit comments

Comments
 (0)