diff --git a/components/Blocks/HotelListing/hotelListing.module.css b/components/Blocks/HotelListing/hotelListing.module.css new file mode 100644 index 000000000..8e2ffb59e --- /dev/null +++ b/components/Blocks/HotelListing/hotelListing.module.css @@ -0,0 +1,49 @@ +.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%; + 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; + flex-direction: row; +} + +@media screen and (min-width: 768px) { + .container { + display: grid; + grid-template-columns: 1fr 2fr; + } + + .image { + height: 100%; + } + + .button { + width: 100%; + max-width: 200px; + } +} diff --git a/components/Blocks/HotelListing/hotelListingTempData.json b/components/Blocks/HotelListing/hotelListingTempData.json new file mode 100644 index 000000000..4b1bc0039 --- /dev/null +++ b/components/Blocks/HotelListing/hotelListingTempData.json @@ -0,0 +1,8 @@ +{ + "title": "Downtown Camper", + "image": "https://test3.scandichotels.com/imagevault/publishedmedia/ehdsd3e3ceoe4ezin6cs/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg", + "adress": "Brunkebergstorg 9", + "distance": "0", + "description": "There is plenty of space for meetings, conferences and parties in our large, modern event room. We offer the ideal conditions for a grand function, good transport possibilities for the event guests, and rooms with large capacity.", + "button": "Book now" +} diff --git a/components/Blocks/HotelListing/index.tsx b/components/Blocks/HotelListing/index.tsx new file mode 100644 index 000000000..d75c5d6eb --- /dev/null +++ b/components/Blocks/HotelListing/index.tsx @@ -0,0 +1,64 @@ +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 Title from "@/components/TempDesignSystem/Text/Title" +import { getIntl } from "@/i18n" + +import hotelListingTempData from "./hotelListingTempData.json" + +import styles from "./hotelListing.module.css" + +export default async function HotelListing() { + // TODO: Fetch and consume data from correct endpoint, when it is decided where the data shall come form. + const { adress, button, description, distance, title, image } = + hotelListingTempData + + const intl = await getIntl() + + return ( +
+
+ +
+
+
+ + + {title} + +
+ {adress} +
+ +
+ + {`${distance} ${intl.formatMessage({ id: "km to city center" })}`} + +
+
+ {description} + +
+
+ ) +}