65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import Image from "@/components/Image"
|
|
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
|
|
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}>
|
|
<BiroScript color="black">{journey.tag}</BiroScript>
|
|
<Title as="h5" level="h4">
|
|
{journey.title}
|
|
</Title>
|
|
</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>
|
|
<BiroScript color="black">{victory.tag}</BiroScript>
|
|
<Title as="h5" level="h4">
|
|
{victory.title}
|
|
</Title>
|
|
</article>
|
|
))}
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
)
|
|
}
|