feat(SW-93): add mocked facility cards

2024-08-29 16:51:19 +02:00
parent 7742fc1259
commit 93e54b4ca1
22 changed files with 632 additions and 63 deletions
@@ -0,0 +1,22 @@
+.image {
+  object-fit: cover;
+  overflow: hidden;
+  width: 100%;
+  min-height: 180px; /* Fixed height from Figma */
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.imageContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--Spacing-x-quarter);
+}
+
+.card {
+  height: 254px; /* Fixed height from Figma */
+}
+
+.container {
+  display: grid;
+  gap: var(--Spacing-x-quarter);
+}
@@ -0,0 +1,34 @@
+import Image from "@/components/Image"
+
+import Card from ".."
+
+import styles from "./cardImage.module.css"
+
+import type { CardImageProps } from "@/types/components/cardImage"
+
+export default function CardImage({
+  card,
+  imageCards,
+  className,
+}: CardImageProps) {
+  return (
+    <article className={`${styles.container} ${className}`}>
+      <div className={styles.imageContainer}>
+        {imageCards.map(
+          ({ backgroundImage }) =>
+            backgroundImage && (
+              <Image
+                key={backgroundImage.id}
+                src={backgroundImage.url}
+                className={styles.image}
+                alt={backgroundImage.title}
+                width={180}
+                height={180}
+              />
+            )
+        )}
+      </div>
+      <Card {...card} className={styles.card} />
+    </article>
+  )
+}