53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { _ } from "@/lib/translation"
|
|
|
|
import Image from "@/components/Image"
|
|
import Title from "@/components/TempDesignSystem/Title"
|
|
|
|
import styles from "./challenges.module.css"
|
|
|
|
import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"
|
|
|
|
export default function Challenges({ journeys, victories }: ChallengesProps) {
|
|
return (
|
|
<section className={styles.challenges}>
|
|
<header className={styles.header}>
|
|
<Title level="h2">{_("Your Challenges Conquer & Earn!")}</Title>
|
|
</header>
|
|
<section className={styles.section}>
|
|
<header>
|
|
<Title level="h3">{_("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">{_("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>
|
|
)
|
|
}
|