diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css similarity index 95% rename from components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css rename to components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css index 5abac9f32..22aea5bce 100644 --- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css +++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css @@ -17,6 +17,6 @@ gap: var(--Spacing-x-one-and-half); } -.body { +.openingHours { margin-top: var(--Spacing-x1); } diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx new file mode 100644 index 000000000..474ccb901 --- /dev/null +++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx @@ -0,0 +1,64 @@ +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 "./facility.module.css" + +import { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility" + +export default async function Facility({ data }: FacilityProps) { + const intl = await getIntl() + const imgUrl = data.content.images[0]?.imageSizes.medium + const imgAltText = data.content.images[0]?.metaData.altText + const facilityType = data.type + const ordinaryOpeningTimes = { + alwaysOpen: data.openingDetails.openingHours.ordinary.alwaysOpen, + openingTime: data.openingDetails.openingHours.ordinary.openingTime, + closingTime: data.openingDetails.openingHours.ordinary.closingTime, + } + const weekendOpeningTimes = { + alwaysOpen: data.openingDetails.openingHours.weekends.alwaysOpen, + openingTime: data.openingDetails.openingHours.weekends.openingTime, + closingTime: data.openingDetails.openingHours.weekends.closingTime, + } + + 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/FacilityCard/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx deleted file mode 100644 index ba3925baf..000000000 --- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -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 d7f381d9b..97ac09a91 100644 --- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx @@ -6,7 +6,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" -import FacilityCard from "./FacilityCard" +import Facility from "./Facility" import styles from "./wellnessAndExercise.module.css" @@ -26,14 +26,7 @@ export default async function WellnessAndExerciseSidePeek({ >
{healthFacilities.map((facility) => ( - + ))}
{buttonUrl && ( diff --git a/types/components/hotelPage/sidepeek/facility.ts b/types/components/hotelPage/sidepeek/facility.ts new file mode 100644 index 000000000..6cb6f0796 --- /dev/null +++ b/types/components/hotelPage/sidepeek/facility.ts @@ -0,0 +1,5 @@ +import type { Hotel } from "@/types/hotel" + +export type FacilityProps = { + data: Hotel["healthFacilities"][number] +} diff --git a/types/components/hotelPage/sidepeek/facilityCard.ts b/types/components/hotelPage/sidepeek/facilityCard.ts deleted file mode 100644 index fbf6e9942..000000000 --- a/types/components/hotelPage/sidepeek/facilityCard.ts +++ /dev/null @@ -1,19 +0,0 @@ -export type FacilityCardProps = { - imgUrl: string - imgAltText: string - facilityType: string - ordinaryOpeningTimes: { - alwaysOpen: boolean - isClosed: boolean - openingTime?: string - closingTime?: string - sortOrder?: number - } - weekendOpeningTimes: { - alwaysOpen: boolean - isClosed: boolean - openingTime?: string - closingTime?: string - sortOrder?: number - } -}