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

feat(SW-281): refactor

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-24 15:08:23 +02:00
parent 2428e09fe5
commit b841604e5e
5 changed files with 75 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +0,0 @@
{
"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"
}

62
components/Blocks/HotelListing/index.tsx
View File

@@ -1,62 +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 { 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" />
<Subtitle>{title}</Subtitle>
<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>
)
}

0
components/Blocks/HotelListing/hotelListing.module.css → components/ContentType/ContentPage/HotelListing/hotelListing.module.css
View File

66
components/ContentType/ContentPage/HotelListing/index.tsx Normal file
View File

@@ -0,0 +1,66 @@
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 { getIntl } from "@/i18n"
import styles from "./hotelListing.module.css"
import { HotelListingProps } from "@/types/components/contentPage/hotelListing"
export default async function HotelListing({
image,
name,
address,
distance,
description,
}: HotelListingProps) {
const intl = await getIntl()
return (
<li>
<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" />
<Subtitle>{name}</Subtitle>
<div className={styles.captions}>
<Caption color="uiTextPlaceholder">{address}</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">
{intl.formatMessage({ id: "See hotel details" })}
</Link>
</Button>
</section>
</article>
</li>
)
}

9
types/components/contentPage/hotelListing.ts Normal file
View File

@@ -0,0 +1,9 @@
import { Hotel } from "@/types/hotel"
export type HotelListingProps = {
image: Hotel["hotelContent"]["images"]["imageSizes"]["large"]
name: Hotel["name"]
address: Hotel["address"]["streetAddress"]
distance: Hotel["location"]["distanceToCentre"]
description: Hotel["hotelContent"]["texts"]["descriptions"]["medium"]
}