53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import Image from "@/components/Image"
|
|
import Title from "@/components/MyPages/Title"
|
|
|
|
import styles from "./challenges.module.css"
|
|
|
|
import type { ChallengesProps } from "@/types/components/myPages/challenges"
|
|
|
|
export default function Challenges({ journeys, victories }: ChallengesProps) {
|
|
return (
|
|
<section className={styles.challenges}>
|
|
<header className={styles.header}>
|
|
<Title level="h2" uppercase>
|
|
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="/check.svg"
|
|
width={12}
|
|
/>
|
|
</div>
|
|
<p className={styles.subtitle}>{victory.tag}</p>
|
|
<h4 className={styles.title}>{victory.title}</h4>
|
|
</article>
|
|
))}
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
)
|
|
}
|