fix: add loyaltyCard

2024-06-28 11:21:09 +02:00
parent 5be118d9e5
commit 323df671d8
23 changed files with 467 additions and 106 deletions
--- a/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -0,0 +1,65 @@
+import ArrowRight from "@/components/Icons/ArrowRight"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import { loyaltyCardVariants } from "./variants"
+
+import styles from "./loyaltyCard.module.css"
+
+import type { LoyaltyCardProps } from "./loyaltyCard"
+
+export default function LoyaltyCard({
+  link,
+  image,
+  heading,
+  bodyText,
+  theme = "white",
+  className,
+}: LoyaltyCardProps) {
+  return (
+    <article
+      className={loyaltyCardVariants({
+        className,
+        theme,
+      })}
+    >
+      {image ? (
+        <section>
+          <Image
+            src={image.url}
+            width={180}
+            height={160}
+            className={styles.image}
+            alt={image.meta.alt || image.title}
+          />
+        </section>
+      ) : null}
+      <Title as="h5" level="h3" textAlign="center">
+        {heading}
+      </Title>
+      {bodyText ? (
+        <Body textAlign="center" color="red">
+          {bodyText}
+        </Body>
+      ) : null}
+      <div className={styles.buttonContainer}>
+        {link ? (
+          <span className={styles.linkWrapper}>
+            <ArrowRight color="burgundy" className={styles.icon} />
+            <Link
+              className={styles.link}
+              color="burgundy"
+              href={link.href}
+              target={link.openInNewTab ? "_blank" : undefined}
+              variant="myPage"
+            >
+              {link.title}
+            </Link>
+          </span>
+        ) : null}
+      </div>
+    </article>
+  )
+}