fix(SW-952): New HotelCard for Map in mobile

2024-12-17 14:03:25 +01:00
parent c468669776
commit 71b11f33ac
12 changed files with 465 additions and 159 deletions
@@ -0,0 +1,45 @@
+.imagePlaceholder {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
+    linear-gradient(-45deg, #000000 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #000000 75%),
+    linear-gradient(-45deg, transparent 75%, #000000 75%);
+  background-size: 120px 120px;
+  background-position:
+    0 0,
+    0 60px,
+    60px -60px,
+    -60px 0;
+}
+
+.imageContainer {
+  position: relative;
+  min-width: 177px;
+  border-radius: var(--Corner-radius-Medium) 0 0 var(--Corner-radius-Medium);
+  overflow: hidden;
+}
+
+.imageContainer.top {
+  width: 80px;
+  min-width: 80px;
+  height: 90px;
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.imageContainer img {
+  object-fit: cover;
+}
+
+.imageContainer .tripAdvisor {
+  position: absolute;
+  left: 7px;
+  top: 7px;
+  border-radius: 2px;
+}
+
+.imageContainer.top .tripAdvisor {
+  left: 4px;
+  top: 4px;
+}
@@ -0,0 +1,41 @@
+import { TripAdvisorIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Chip from "@/components/TempDesignSystem/Chip"
+
+import { hotelCardDialogImageVariants } from "./variants"
+
+import styles from "./hotelCardDialogImage.module.css"
+
+import type { HotelCardDialogImageProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+export default function HotelCardDialogImage({
+  firstImage,
+  altText,
+  ratings,
+  imageError,
+  setImageError,
+  position,
+}: HotelCardDialogImageProps) {
+  const classNames = hotelCardDialogImageVariants({ position })
+
+  return (
+    <div className={classNames}>
+      {!firstImage || imageError ? (
+        <div className={styles.imagePlaceholder} />
+      ) : (
+        <Image
+          src={firstImage}
+          alt={altText || ""}
+          fill
+          onError={() => setImageError(true)}
+        />
+      )}
+      <div className={styles.tripAdvisor}>
+        <Chip intent="secondary" className={styles.tripAdvisor}>
+          <TripAdvisorIcon color="burgundy" />
+          {ratings}
+        </Chip>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./hotelCardDialogImage.module.css"
+
+export const hotelCardDialogImageVariants = cva(styles.imageContainer, {
+  variants: {
+    position: {
+      top: styles.top,
+      left: styles.left,
+    },
+  },
+  defaultVariants: {
+    position: "top",
+  },
+})