Skip to content

Commit 6e7e4a3

Browse files
mhenriettemhenriette
committed
feat: create RewardCertificate component
1 parent 4ba91ce commit 6e7e4a3

File tree

3 files changed

+58
-48
lines changed

3 files changed

+58
-48
lines changed

‎src/components/cards/challenge/Challenge.tsx‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Coin from "@/components/ui/Coin";
21
import ArrowButton from "@/components/ui/button/Arrow";
32
import { Community } from "@/types/community";
43
import { Challenge } from "@/types/course";
@@ -7,7 +6,7 @@ import Badges from "./Badges";
76
import { useMemo } from "react";
87
import { useTranslation } from "next-i18next";
98
import Image from "next/image";
10-
import { shortenNumber } from "@/utilities";
9+
import RewardCertificates from "./RewardCertificates";
1110

1211
/**
1312
* `ChallengeCard` is a function component that renders a card
@@ -66,24 +65,8 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
6665
<Image src={data?.certificateData?.icon} alt="achievement" fill />
6766
</div>
6867
<div className="">
69-
<h1 className="font-bold text-gray-400 text-xs uppercase">{t("communities.overview.challenge.unlock.certificate")}</h1>
70-
{data?.rewards.map((reward, index) => (
71-
<div key={reward.id} className={`flex items-center md:gap-1 border-gray-200 py-2 ${index !== data?.rewards.length - 1 ? "border-b" : ""}`}>
72-
<Coin size="small" token={reward?.token} />
73-
<div className="text-sm">
74-
<span>
75-
{shortenNumber(reward.amount)} {reward.token}
76-
</span>
77-
<span>
78-
{reward.type === "SUBMISSION" ? (
79-
<span> {t("communities.overview.challenge.for.certificate")}</span>
80-
) : (
81-
<span> {t("communities.overview.challenge.for.feedback")}</span>
82-
)}
83-
</span>
84-
</div>
85-
</div>
86-
))}
68+
<h1 className="font-bold text-gray-400 text-xs uppercase pb-2">{t("communities.overview.challenge.unlock.certificate")}</h1>
69+
<RewardCertificates rewards={data?.rewards}/>
8770
</div>
8871
{data?.isHackathon && <p className="py-2 border-t border-gray-200 text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
8972
</div>

‎src/components/cards/challenge/RewardCertificates.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { useTranslation } from "react-i18next";
2+
import Coin from "@/components/ui/Coin";
3+
import { shortenNumber } from "@/utilities";
4+
import { Reward } from "@/types/course";
5+
import classNames from "classnames";
6+
import { ReactElement } from "react";
7+
8+
interface RewardCertificatesProps {
9+
rewards: Reward[];
10+
isReward?: boolean;
11+
}
12+
13+
/**
14+
* RewardCertificates component is a function component that renders a list of rewards
15+
* for a challenge.
16+
*
17+
* @param {RewardCertificatesProps} { rewards, isReward }
18+
* @returns {JSX.Element} The rendered RewardCertificates component.
19+
*/
20+
21+
export default function RewardCertificates({ rewards, isReward }: RewardCertificatesProps): ReactElement {
22+
const { t } = useTranslation();
23+
return (
24+
<>
25+
{rewards.map((reward, index) => (
26+
<div
27+
key={reward.id}
28+
className={classNames(
29+
"flex items-center gap-1 border-gray-200 pb-2",
30+
{ "pt-2": index !== 0 },
31+
{ "border-b": (index !== rewards.length - 1 && isReward) || (rewards.length === 1 && isReward) || index !== rewards.length - 1 }
32+
)}
33+
>
34+
<Coin size="small" token={reward?.token} />
35+
<div className="text-sm">
36+
<span>
37+
{shortenNumber(reward.amount)} {reward.token}
38+
</span>
39+
<span>
40+
{reward.type === "SUBMISSION" ? (
41+
<span> {t("communities.overview.challenge.for.certificate")}</span>
42+
) : (
43+
<span> {t("communities.overview.challenge.for.feedback")}</span>
44+
)}
45+
</span>
46+
</div>
47+
</div>
48+
))}
49+
</>
50+
);
51+
}

‎src/components/sections/challenges/Rewards.tsx‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import Section from "@/components/sections/communities/_partials/Section";
22
import { useSelector } from "@/hooks/useTypedSelector";
33
import { useTranslation } from "next-i18next";
44
import { ReactElement } from "react";
5-
import Coin from "@/components/ui/Coin";
65
import Certificate from "@/components/ui/Certificate";
76
import { useRouter } from "next/router";
8-
import { shortenNumber } from "@/utilities";
7+
import RewardCertificates from "@/components/cards/challenge/RewardCertificates";
98

109
/**
1110
* Overview reward section component
@@ -23,38 +22,15 @@ export function OverviewRewards(): ReactElement {
2322
return (
2423
<Section title={`${t("communities.overview.reward.title")}`}>
2524
<p className="my-5 text-lg">{t("course.challenge.reward.certificate.description")}</p>
26-
<div className="text-sm mt-6 flex gap-8 w-full md:w-2/3">
25+
<div className="text-sm mt-6 flex gap-8 w-full md:w-2/3 items-center">
2726
<div className="">
2827
<Certificate size="medium" name={router.query?.slug as string} />
2928
</div>
3029
<div className="flex flex-col lg:flex-row justify-between gap-2 items-start w-full">
3130
<div className="flex flex-col w-full lg:w-1/2">
32-
{challenge?.rewards.map((reward, index, rewardsArray) => (
33-
<div
34-
key={reward.id}
35-
className={`flex items-center gap-1 pb-2 ${index !== (rewardsArray.length !== 1 && rewardsArray.length - 1) ? "border-b border-gray-200" : ""} ${
36-
index !== 0 ? "pt-2" : ""
37-
} `}
38-
>
39-
<Coin size="small" token={reward?.token} />
40-
<div className="text-sm">
41-
<span>
42-
{shortenNumber(reward?.amount)} {reward?.token}
43-
</span>
44-
<span>
45-
{reward?.type === "SUBMISSION" ? (
46-
<span> {t("communities.overview.challenge.for.certificate")}</span>
47-
) : (
48-
<span> {t("communities.overview.challenge.for.feedback")}</span>
49-
)}
50-
</span>
51-
</div>
52-
</div>
53-
))}
31+
{challenge?.rewards && <RewardCertificates rewards={challenge?.rewards} isReward />}
5432
</div>
55-
{challenge?.isHackathon && (
56-
<div className="pb-2 border-b border-gray-200 w-full lg:w-1/2">{t("communities.overview.challenge.participate", { token: token })}</div>
57-
)}
33+
{challenge?.isHackathon && <div className="pb-2 border-b border-gray-200 w-full lg:w-1/2">{t("communities.overview.challenge.participate", { token: token })}</div>}
5834
</div>
5935
</div>
6036
</Section>

0 commit comments

Comments
 (0)