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

feat(SW-880): update facility type rendering

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-15 14:21:52 +01:00
committed by Joakim Jäderberg
parent c1152109c3
commit ce6914a7e4
9 changed files with 35 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/ContentType/HotelPage/SidePeeks/Utils/getType.ts
View File

@@ -1,29 +0,0 @@
import { getIntl } from "@/i18n"
export async function getFacilityType(type: string) {
const intl = await getIntl()
const outdoorPool = intl.formatMessage({ id: "Outdoor pool" })
const indoorPool = intl.formatMessage({ id: "Indoor pool" })
const sauna = intl.formatMessage({ id: "Sauna" })
const relax = intl.formatMessage({ id: "Relax" })
const gym = intl.formatMessage({ id: "Gym" })
const jacuzzi = intl.formatMessage({ id: "Jacuzzi" })
switch (type) {
case "OutdoorPool":
return outdoorPool
case "IndoorPool":
return indoorPool
case "Sauna":
return sauna
case "Relax":
return relax
case "Gym":
return gym
case "Jacuzzi":
return jacuzzi
default:
return type
}
}

42
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
View File

@@ -10,14 +10,13 @@ import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getFacilityType } from "../Utils/getType"
import styles from "./wellnessAndExercise.module.css"
import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise"
export default async function WellnessAndExerciseSidePeek({
healthFacilities,
buttonUrl,
}: WellnessAndExerciseSidePeekProps) {
const intl = await getIntl()
const lang = getLang()
@@ -30,16 +29,20 @@ export default async function WellnessAndExerciseSidePeek({
<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}
/>
{facility.content.images[0]?.imageSizes.medium && (
<Image
src={facility.content.images[0].imageSizes.medium}
alt={facility.content.images[0].metaData.altText || ""}
className={styles.image}
height={400}
width={200}
/>
)}
<div className={styles.information}>
<Subtitle color="burgundy" asChild type="one">
<Title level="h3">{getFacilityType(facility.type)}</Title>
<Title level="h3">
{intl.formatMessage({ id: `${facility.type}` })}
</Title>
</Subtitle>
<div>
<Subtitle type="two" color="uiTextHighContrast">
@@ -55,21 +58,20 @@ export default async function WellnessAndExerciseSidePeek({
? `${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>
{/* TODO: Determine what details should be displayed about the facility type */}
</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>
{buttonUrl && (
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild>
<Link href={buttonUrl} weight="bold" color="burgundy">
{intl.formatMessage({ id: "Show wellness & exercise" })}
</Link>
</Button>
</div>
)}
</SidePeek>
)
}