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

feat(SW-880): add wellness and exercise sidepeek

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-13 16:49:36 +01:00
parent f0c7aa349c
commit cf0173ef57
11 changed files with 151 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { wellnessAndExercise } from "@/constants/routes/hotelPageParams"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./wellnessAndExercise.module.css"
import { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise"
export default async function WellnessAndExerciseSidePeek({
healthFacilities,
}: WellnessAndExerciseSidePeekProps) {
const intl = await getIntl()
const lang = getLang()
return (
<SidePeek
contentKey={wellnessAndExercise[lang]}
title={intl.formatMessage({ id: "Wellness & Exercise" })}
>
<div className={styles.wrapper}>
{healthFacilities.map((facility) => (
<div className={styles.content} key={facility.type}>
<Image
src={facility.content.images[0]?.imageSizes.large}
alt={facility.content.images[0]?.metaData.altText}
className={styles.image}
height={400}
width={200}
/>
<div className={styles.information}>
<Subtitle color="burgundy" asChild>
<Title level="h3">{facility.type}</Title>
</Subtitle>
<div>
<Subtitle>
{intl.formatMessage({ id: " Opening Hours" })}
</Subtitle>
<Body className={styles.body}>
{facility.openingDetails.openingHours.ordinary.alwaysOpen
? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Mon-Fri" })} ${facility.openingDetails.openingHours.ordinary.openingTime}-${facility.openingDetails.openingHours.ordinary.closingTime}`}
</Body>
<Body>
{facility.openingDetails.openingHours.weekends.alwaysOpen
? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Sat-Sun" })} ${facility.openingDetails.openingHours.weekends.openingTime}-${facility.openingDetails.openingHours.weekends.closingTime}`}
</Body>
<Body>Placeholder text</Body>
</div>
</div>
</div>
))}
</div>
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild>
<Link href="#" weight="bold" color="burgundy">
{intl.formatMessage({ id: "Show wellness & exercise" })}
</Link>
</Button>
</div>
</SidePeek>
)
}

41
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css Normal file
View File

@@ -0,0 +1,41 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
margin-bottom: calc(
var(--Spacing-x4) * 2 + 80px
); /* Creates space between the wrapper and buttonContainer */
}
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
.image {
width: 100%;
height: 270px;
object-fit: cover;
border-radius: var(--Corner-radius-Medium);
}
.information {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-one-and-half);
}
.body {
margin-top: var(--Spacing-x1);
}
.buttonContainer {
background-color: var(--Base-Background-Primary-Normal);
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x4) var(--Spacing-x2);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}

10
components/ContentType/HotelPage/index.tsx
View File

@@ -16,6 +16,7 @@ import MapCard from "./Map/MapCard"
import MapWithCardWrapper from "./Map/MapWithCard"
import MobileMapToggle from "./Map/MobileMapToggle"
import StaticMap from "./Map/StaticMap"
import WellnessAndExerciseSidePeek from "./SidePeeks/WellnessAndExercise"
import AmenitiesList from "./AmenitiesList"
import Facilities from "./Facilities"
import IntroSection from "./IntroSection"
@@ -52,6 +53,7 @@ export default async function HotelPage() {
facilities,
faq,
alerts,
healthFacilities,
} = hotelData
const topThreePois = pointsOfInterest.slice(0, 3)
@@ -145,13 +147,7 @@ export default async function HotelPage() {
{/* TODO */}
Restaurant & Bar
</SidePeek>
<SidePeek
contentKey={hotelPageParams.wellnessAndExercise[lang]}
title={intl.formatMessage({ id: "Wellness & Exercise" })}
>
{/* TODO */}
Wellness & Exercise
</SidePeek>
<WellnessAndExerciseSidePeek healthFacilities={healthFacilities} />
<SidePeek
contentKey={hotelPageParams.activities[lang]}
title={intl.formatMessage({ id: "Activities" })}