60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import Image from "@/components/Image"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import styles from "./challenges.module.css"
|
|
|
|
import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"
|
|
|
|
export default async function Challenges({
|
|
journeys,
|
|
victories,
|
|
}: ChallengesProps) {
|
|
const { formatMessage } = await getIntl()
|
|
return (
|
|
<section className={styles.challenges}>
|
|
<header className={styles.header}>
|
|
<Title level="h2">
|
|
{formatMessage({ id: "Your Challenges Conquer & Earn!" })}
|
|
</Title>
|
|
</header>
|
|
<section className={styles.section}>
|
|
<header>
|
|
<Title level="h3">{formatMessage({ id: "On your journey" })}</Title>
|
|
</header>
|
|
<section className={styles.journeys}>
|
|
{journeys.map((journey) => (
|
|
<article className={styles.journey} key={journey.title}>
|
|
<p className={styles.subtitle}>{journey.tag}</p>
|
|
<h4 className={styles.title}>{journey.title}</h4>
|
|
</article>
|
|
))}
|
|
</section>
|
|
</section>
|
|
<aside className={styles.aside}>
|
|
<header>
|
|
<Title level="h3">
|
|
{formatMessage({ id: "Previous victories" })}
|
|
</Title>
|
|
</header>
|
|
<section className={styles.victories}>
|
|
{victories.map((victory) => (
|
|
<article className={styles.victory} key={victory.title}>
|
|
<div className={styles.circle}>
|
|
<Image
|
|
alt="Checkmark Icon"
|
|
height={9}
|
|
src="/_static/icons/check.svg"
|
|
width={12}
|
|
/>
|
|
</div>
|
|
<p className={styles.subtitle}>{victory.tag}</p>
|
|
<h4 className={styles.title}>{victory.title}</h4>
|
|
</article>
|
|
))}
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
)
|
|
}
|