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/ContentType/ContentPage/HotelListingItem/hotelListingItem.module.css
+++ b/components/ContentType/ContentPage/HotelListingItem/hotelListingItem.module.css
@@ -1,49 +0,0 @@
-.container {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Medium);
-  overflow: hidden;
-}
-
-.image {
-  width: 100%;
-  max-height: 200px;
-  object-fit: cover;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
-}
-
-.intro {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-}
-
-.dividerContainer {
-  padding: 0 var(--Spacing-x1);
-}
-
-.captions {
-  display: flex;
-}
-
-@media screen and (min-width: 768px) {
-  .container {
-    display: grid;
-    grid-template-columns: minmax(250px, 350px) auto;
-  }
-
-  .image {
-    max-height: none;
-    height: 100%;
-  }
-
-  .button {
-    width: min(100%, 200px);
-  }
-}
--- a/components/ContentType/ContentPage/HotelListingItem/index.tsx
+++ b/components/ContentType/ContentPage/HotelListingItem/index.tsx
@@ -1,71 +0,0 @@
-import { ScandicLogoIcon } from "@/components/Icons"
-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 styles from "./hotelListingItem.module.css"
-
-import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"
-
-export default async function HotelListingItem({
-  imageUrl,
-  altText,
-  name,
-  address,
-  distanceToCentre,
-  description,
-  link,
-}: HotelListingItemProps) {
-  const intl = await getIntl()
-
-  return (
-    <article className={styles.container}>
-      <Image
-        src={imageUrl}
-        alt={altText}
-        width={300}
-        height={200}
-        className={styles.image}
-      />
-      <section className={styles.content}>
-        <div className={styles.intro}>
-          <ScandicLogoIcon color="red" />
-          <Subtitle asChild>
-            <Title as="h3">{name}</Title>
-          </Subtitle>
-          <div className={styles.captions}>
-            <Caption color="uiTextPlaceholder">{address}</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(distanceToCentre / 1000) }
-              )}
-            </Caption>
-          </div>
-        </div>
-        <Body>{description}</Body>
-        <Button
-          intent="primary"
-          theme="base"
-          size="small"
-          className={styles.button}
-          asChild
-        >
-          <Link href={link} color="white">
-            {intl.formatMessage({ id: "See hotel details" })}
-          </Link>
-        </Button>
-      </section>
-    </article>
-  )
-}