70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useParams } from "next/navigation"
|
|
import { Check } from "react-feather"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import levelsData from "./data"
|
|
|
|
import styles from "./loyaltyLevels.module.css"
|
|
|
|
import type { Level, LevelCardProps } from "@/types/components/loyalty/blocks"
|
|
|
|
export default function LoyaltyLevels() {
|
|
const params = useParams()
|
|
const lang = params.lang as Lang
|
|
const { formatMessage } = useIntl()
|
|
|
|
const { levels } = levelsData[lang]
|
|
return (
|
|
<section className={styles.container}>
|
|
<div className={styles.cardContainer}>
|
|
{levels.map((level: Level) => (
|
|
<LevelCard
|
|
key={level.tier}
|
|
formatMessage={formatMessage}
|
|
lang={lang}
|
|
level={level}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className={styles.buttonContainer}>
|
|
<Button intent="primary" asChild>
|
|
<Link href={`/${lang}/compare-all-levels`}>
|
|
{formatMessage({ id: "Compare all levels" })}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
|
|
const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
|
|
const qualifications = level.requiredNights
|
|
? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
|
|
: pointsString
|
|
return (
|
|
<article className={styles.card}>
|
|
<Title className={styles.tierHeading} level="h4">
|
|
{level.tier}
|
|
</Title>
|
|
<Image src={level.logo} alt={level.name} width={140} height={54} />
|
|
<p className={styles.qualifications}>{qualifications}</p>
|
|
{level.benefits.map((benefit) => (
|
|
<p key={benefit.title} className={styles.benefits}>
|
|
<Check className={styles.icon} />
|
|
{benefit.title}
|
|
</p>
|
|
))}
|
|
</article>
|
|
)
|
|
}
|