51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Check } from "react-feather"
|
|
|
|
import { _ } from "@/lib/translation"
|
|
import { serverClient } from "@/lib/trpc/server"
|
|
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Title from "@/components/Title"
|
|
|
|
import styles from "./loyaltyLevels.module.css"
|
|
|
|
import { LevelCardProps } from "@/types/components/loyalty/blocks"
|
|
|
|
export default async function LoyaltyLevels() {
|
|
const data = await serverClient().loyalty.levels.all()
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<div className={styles.cardContainer}>
|
|
{data.map((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) {
|
|
return (
|
|
<article className={styles.card}>
|
|
<Title level="h4">{level.tier}</Title>
|
|
<Image src={level.logo} alt={level.name} width={140} height={54} />
|
|
<p className={styles.qualifications}>
|
|
{level.requiredPoints} {_("or")} {level.requiredNights} {_("nights")}
|
|
</p>
|
|
{level.topBenefits.map((benefit) => (
|
|
<p key={benefit} className={styles.benefits}>
|
|
<Check className={styles.icon} />
|
|
{benefit}
|
|
</p>
|
|
))}
|
|
</article>
|
|
)
|
|
}
|