scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -1,14 +1,23 @@
"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 { CheckIcon } from "@/components/Icons"
import {
BestFriend,
CloseFriend,
DearFriend,
GoodFriend,
LoyalFriend,
NewFriend,
TrueFriend,
} from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "./data"
@@ -35,13 +44,11 @@ export default function LoyaltyLevels() {
/>
))}
</div>
<div className={styles.buttonContainer}>
<Button intent="primary" asChild>
<Link href={`/${lang}/compare-all-levels`}>
{formatMessage({ id: "Compare all levels" })}
</Link>
</Button>
</div>
<Button asChild intent="primary">
<Link className={styles.link} href={`/${lang}/compare-all-levels`}>
{formatMessage({ id: "Compare all levels" })}
</Link>
</Button>
</section>
)
}
@@ -51,19 +58,46 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
const qualifications = level.requiredNights
? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
: pointsString
let Level = null
switch (level.tier) {
case 1:
Level = NewFriend
break
case 2:
Level = GoodFriend
break
case 3:
Level = CloseFriend
break
case 4:
Level = DearFriend
break
case 5:
Level = LoyalFriend
break
case 6:
Level = TrueFriend
break
case 7:
Level = BestFriend
break
}
return (
<article className={styles.card}>
<Title className={styles.tierHeading} level="h4">
{level.tier}
</Title>
<Image src={level.icon} 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>
))}
{Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
<div className={styles.textContainer}>
<Body textTransform="bold">{qualifications}</Body>
{level.benefits.map((benefit) => (
<Body key={benefit.title} textAlign="center">
<CheckIcon className={styles.checkIcon} />
{benefit.title}
</Body>
))}
</div>
</article>
)
}