feat:(SW-219): content card component WIP

2024-09-11 11:31:42 +02:00
parent 6cfc79f8b5
commit 3e08b3357b
7 changed files with 215 additions and 1 deletions
@@ -0,0 +1,85 @@
+import React from "react"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import Subtitle from "../Text/Subtitle"
+import { contentCardVariants } from "./variants"
+
+import styles from "./contentCard.module.css"
+
+import type { ContentCardProps } from "@/types/components/contentCard"
+
+export default function ContentCard({
+  title,
+  description,
+  primaryCTA,
+  secondaryCTA,
+  sidePeekCTA,
+  backgroundImage,
+  style = "default",
+  className,
+}: ContentCardProps) {
+  const cardClasses = contentCardVariants({ style, className })
+
+  return (
+    <div className={cardClasses}>
+      {backgroundImage && (
+        <div className={styles.imageContainer}>
+          <Image
+            src={backgroundImage}
+            alt=""
+            className={styles.backgroundImage}
+            width={399}
+            height={201}
+          />
+        </div>
+      )}
+      <div className={styles.content}>
+        <Subtitle textAlign="left" type="two" color="black">
+          {title}
+        </Subtitle>
+        <Body color="black">{description}</Body>
+        {sidePeekCTA ? (
+          <Button
+            // onClick={sidePeekCTA.onClick}
+            theme="base"
+            variant="icon"
+            intent="text"
+            size="small"
+            className={styles.sidePeekCTA}
+          >
+            {sidePeekCTA.label}
+            <ChevronRightIcon />
+          </Button>
+        ) : (
+          <div className={styles.ctaContainer}>
+            {primaryCTA && (
+              <Button asChild intent="primary" size="small">
+                <Link
+                  href={primaryCTA.href}
+                  target={primaryCTA.openInNewTab ? "_blank" : undefined}
+                >
+                  {primaryCTA.label}
+                </Link>
+              </Button>
+            )}
+            {secondaryCTA && (
+              <Button asChild intent="secondary" size="small">
+                <Link
+                  href={secondaryCTA.href}
+                  target={secondaryCTA.openInNewTab ? "_blank" : undefined}
+                >
+                  {secondaryCTA.label}
+                </Link>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}