63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useParams } from "next/navigation"
|
|
import { Check } from "react-feather"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
import { _ } from "@/lib/translation"
|
|
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Title from "@/components/TempDesignSystem/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 { lang } = useParams()
|
|
|
|
const { levels } = levelsData[lang as Lang]
|
|
return (
|
|
<section className={styles.container}>
|
|
<div className={styles.cardContainer}>
|
|
{levels.map((level: Level) => (
|
|
<LevelCard key={level.tier} level={level} />
|
|
))}
|
|
</div>
|
|
<div className={styles.buttonContainer}>
|
|
<Button intent="primary" asChild>
|
|
<Link href={"/compare-all-levels"}>{_("Compare all levels")}</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function LevelCard({ level }: LevelCardProps) {
|
|
const { lang } = useParams()
|
|
|
|
const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
|
|
const qualifications = level.requiredNights
|
|
? `${pointsString} ${_("or")} ${level.requiredNights} ${_("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>
|
|
)
|
|
}
|