Merged in feat/best-friend-hero (pull request #338)

Feat(SW-170): Update overview hero Approved-by: Christel Westerberg
2024-07-12 06:45:44 +00:00
parent c1892ace66
commit 801a041404
48 changed files with 595 additions and 203 deletions
--- a/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn/index.tsx
@@ -0,0 +1,79 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./pointsColumn.module.css"
+
+import type {
+  NightsColumn,
+  PointsColumn,
+  PointsColumnProps,
+} from "@/types/components/myPages/points"
+
+export const YourPointsColumn = ({ points }: PointsColumn) =>
+  PointsColumn({
+    points,
+    title: "Your points",
+    subtitle: "as of today",
+  })
+
+export const NextLevelPointsColumn = ({
+  points,
+  subtitleParam,
+}: PointsColumn) =>
+  PointsColumn({
+    points,
+    title: "Points needed to level up",
+    subtitleParam,
+    subtitle: "next level:",
+  })
+
+export const StayOnLevelColumn = ({ points, subtitleParam }: PointsColumn) =>
+  PointsColumn({
+    points,
+    title: "Points needed to stay on level",
+    subtitleParam,
+    subtitle: "by",
+  })
+
+export const NextLevelNightsColumn = ({
+  nights,
+  subtitleParam,
+}: NightsColumn) =>
+  PointsColumn({
+    nights,
+    title: "Nights needed to level up",
+    subtitleParam,
+    subtitle: "by",
+  })
+
+async function PointsColumn({
+  points,
+  nights,
+  title,
+  subtitle,
+  subtitleParam,
+}: PointsColumnProps) {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <article>
+      <Body
+        color="white"
+        textTransform="bold"
+        textAlign="center"
+        className={styles.firstRow}
+      >
+        {formatMessage({
+          id: title,
+        })}
+      </Body>
+      <Title color="white" level="h2" textAlign="center">
+        {points ?? nights ?? "N/A"}
+      </Title>
+      <Body color="white" textAlign="center">
+        {formatMessage({ id: subtitle })} {subtitleParam}
+      </Body>
+    </article>
+  )
+}