diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css new file mode 100644 index 000000000..5abac9f32 --- /dev/null +++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css @@ -0,0 +1,22 @@ +.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); +} diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx new file mode 100644 index 000000000..ba3925baf --- /dev/null +++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx @@ -0,0 +1,54 @@ +import Image from "@/components/Image" +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 styles from "./facilityCard.module.css" + +import type { FacilityCardProps } from "@/types/components/hotelPage/sidepeek/facilityCard" + +export default async function FacilityCard({ + imgUrl, + imgAltText, + facilityType, + ordinaryOpeningTimes, + weekendOpeningTimes, +}: FacilityCardProps) { + const intl = await getIntl() + return ( +
+ {imgUrl && ( + {imgAltText + )} +
+ + + {intl.formatMessage({ id: `${facilityType}` })} + + +
+ + {intl.formatMessage({ id: " Opening Hours" })} + + + {ordinaryOpeningTimes.alwaysOpen + ? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}` + : `${intl.formatMessage({ id: "Mon-Fri" })} ${ordinaryOpeningTimes.openingTime}-${ordinaryOpeningTimes.closingTime}`} + + + {weekendOpeningTimes.alwaysOpen + ? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}` + : `${intl.formatMessage({ id: "Sat-Sun" })} ${weekendOpeningTimes.openingTime}-${weekendOpeningTimes.closingTime}`} + +
+
+
+ ) +} diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx index 5314e3f18..d7f381d9b 100644 --- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx @@ -1,15 +1,13 @@ 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 FacilityCard from "./FacilityCard" + import styles from "./wellnessAndExercise.module.css" import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise" @@ -28,39 +26,14 @@ export default async function WellnessAndExerciseSidePeek({ >
{healthFacilities.map((facility) => ( -
- {facility.content.images[0]?.imageSizes.medium && ( - {facility.content.images[0].metaData.altText - )} -
- - - {intl.formatMessage({ id: `${facility.type}` })} - - -
- - {intl.formatMessage({ id: " Opening Hours" })} - - - {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}`} - - - {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}`} - -
-
-
+ ))}
{buttonUrl && ( diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css index 0c33da7cd..11a410f13 100644 --- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css +++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css @@ -7,29 +7,6 @@ ); /* 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); diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx index eb9d1dd37..a565ea117 100644 --- a/components/ContentType/HotelPage/index.tsx +++ b/components/ContentType/HotelPage/index.tsx @@ -147,7 +147,10 @@ export default async function HotelPage() { {/* TODO */} Restaurant & Bar - +