feat(SW-1391): add join scandic friends block

2025-02-05 15:08:57 +01:00
parent 9ad8d39712
commit 4d63cc57c5
13 changed files with 343 additions and 2 deletions
--- a/components/Blocks/JoinScandicFriends/index.tsx
+++ b/components/Blocks/JoinScandicFriends/index.tsx
@@ -0,0 +1,83 @@
+import { SurpriseIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./joinScandicFriends.module.css"
+
+import type { JoinScandicFriends } from "@/types/trpc/routers/contentstack/startPage"
+
+interface JoinScandicFriendsProps {
+  content: JoinScandicFriends
+}
+
+export default function JoinScandicFriends({
+  content,
+}: JoinScandicFriendsProps) {
+  const { show_header, show_usp, usp, primary_button } = content
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.iconContainer}>
+        {content.image ? (
+          <Image
+            src={content.image.url}
+            alt={content.image.title}
+            width={384}
+            height={384}
+          />
+        ) : (
+          <SurpriseIcon width={384} height={384} />
+        )}
+      </div>
+      <div className={styles.content}>
+        <div className={styles.textContent}>
+          {show_header ? (
+            <header className={styles.header}>
+              <BiroScript color="red" type="two">
+                {content.scripted_top_title}
+              </BiroScript>
+              <Title level="h3">{content.title}</Title>
+            </header>
+          ) : null}
+
+          <Preamble>{content.preamble}</Preamble>
+
+          {show_usp && usp.length ? (
+            <ul className={styles.usp}>
+              {usp.map((uspBullet) => (
+                <Body asChild key={uspBullet}>
+                  <li>{uspBullet}</li>
+                </Body>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        {content.has_primary_button ? (
+          <div className={styles.buttonContainer}>
+            <Button
+              theme="base"
+              intent="primary"
+              size="small"
+              fullWidth
+              asChild
+            >
+              <Link
+                href={primary_button.href}
+                target={primary_button.openInNewTab ? "_blank" : undefined}
+                color="none"
+                size="regular"
+              >
+                {primary_button.title}
+              </Link>
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}