scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-281): create hotellisting component

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-23 14:59:31 +02:00
parent ec89a6e7a8
commit 32c875a56c
3 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/Blocks/HotelListing/hotelListing.module.css Normal file
View File

@@ -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;
}
}

8
components/Blocks/HotelListing/hotelListingTempData.json Normal file
View File

@@ -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"
}

64
components/Blocks/HotelListing/index.tsx Normal file
View File

@@ -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 (
<article className={styles.container}>
<section>
<Image
src={image}
alt=""
width={300}
height={200}
className={styles.image}
/>
</section>
<section className={styles.content}>
<div className={styles.intro}>
<ScandicLogoIcon color="red" />
<Title as="h4" color="black" textTransform="capitalize">
{title}
</Title>
<div className={styles.captions}>
<Caption color="uiTextPlaceholder">{adress}</Caption>
<div className={styles.dividerContainer}>
<Divider variant="vertical" color="beige" />
</div>
<Caption color="uiTextPlaceholder">
{`${distance} ${intl.formatMessage({ id: "km to city center" })}`}
</Caption>
</div>
</div>
<Body>{description}</Body>
<Button
intent="primary"
theme="base"
size="small"
className={styles.button}
asChild
>
<Link href="#" color="white">
{button}
</Link>
</Button>
</section>
</article>
)
}