feat(SW-664): Hotel listing component and queries for content pages

2024-12-11 14:46:38 +01:00
parent 118f1afafa
commit 3939bf7cdc
32 changed files with 989 additions and 140 deletions
--- a/components/Blocks/HotelListing/HotelListingItem/index.tsx
+++ b/components/Blocks/HotelListing/HotelListingItem/index.tsx
@@ -0,0 +1,81 @@
+import HotelLogo from "@/components/Icons/Logos"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
+
+import { getTypeSpecificInformation } from "./utils"
+
+import styles from "./hotelListingItem.module.css"
+
+import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"
+
+export default async function HotelListingItem({
+  hotel,
+  contentType = "hotel",
+  url,
+}: HotelListingItemProps) {
+  const intl = await getIntl()
+  const { description, imageSrc, altText } = getTypeSpecificInformation(
+    contentType,
+    hotel
+  )
+
+  return (
+    <article className={styles.container}>
+      <Image
+        src={imageSrc}
+        alt={altText}
+        width={300}
+        height={200}
+        className={styles.image}
+      />
+      <section className={styles.content}>
+        <div className={styles.intro}>
+          <HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
+          <Subtitle asChild>
+            <Title as="h3">{hotel.name}</Title>
+          </Subtitle>
+          <div className={styles.captions}>
+            <Caption color="uiTextPlaceholder">
+              {hotel.address.streetAddress}
+            </Caption>
+            <div className={styles.dividerContainer}>
+              <Divider variant="vertical" color="beige" />
+            </div>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage(
+                { id: "Distance in km to city centre" },
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
+              )}
+            </Caption>
+          </div>
+        </div>
+        <Body>{description}</Body>
+        {url && (
+          <Button
+            intent="primary"
+            theme="base"
+            size="small"
+            className={styles.button}
+            asChild
+          >
+            <Link href={url} color="white">
+              {intl.formatMessage({ id: "See hotel details" })}
+            </Link>
+          </Button>
+        )}
+      </section>
+    </article>
+  )
+}