diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx index a06224077..a89fd0673 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx @@ -1,3 +1,16 @@ -export default function AccessibilityAmenity() { - return
AccessibilityAmenity
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" +import { getIntl } from "@/i18n" + +import { IconName } from "@/types/components/icon" + +export default async function AccessibilityAmenity() { + const intl = await getIntl() + return ( + + Accessibility + + ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx index d3a24f585..aeb11aef5 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx @@ -1,3 +1,16 @@ -export default function BreakfastAmenity() { - return
BreakfastAmenity
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" +import { getIntl } from "@/i18n" + +import { IconName } from "@/types/components/icon" + +export default async function BreakfastAmenity() { + const intl = await getIntl() + return ( + + Breakfast + + ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx index 94990fd1f..f17494669 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx @@ -1,5 +1,16 @@ -import React from "react" +import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" +import { getIntl } from "@/i18n" -export default function CheckInCheckOutAmenity() { - return
CheckInAmenity
+import { IconName } from "@/types/components/icon" + +export default async function CheckInCheckOutAmenity() { + const intl = await getIntl() + return ( + + Check in / check out information + + ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx index 9d8a174eb..481391625 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx @@ -1,3 +1,16 @@ -export default function MeetingsAmenity() { - return
MeetingsAmenity
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" +import { getIntl } from "@/i18n" + +import { IconName } from "@/types/components/icon" + +export default async function MeetingsAmenity() { + const intl = await getIntl() + return ( + + Meeting and Conferences + + ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx index 9f685d1a1..422c6c422 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx @@ -1,3 +1,16 @@ -export default function ParkingAmenity() { - return
ParkingAmenity
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" +import { getIntl } from "@/i18n" + +import { IconName } from "@/types/components/icon" + +export default async function ParkingAmenity() { + const intl = await getIntl() + return ( + + Parking + + ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css index 00ab8aebe..b6d3ba651 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css @@ -1,5 +1,10 @@ .wrapper { - display: flex; - flex-direction: column; - gap: var(--Spacing-x3); + padding: var(--Spacing-x1); + border-bottom: 1px solid var(--Base-Border-Subtle); +} + +.amenity { + display: flex; + gap: var(--Spacing-x1); + padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx index 9e70e8060..e224156fe 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx @@ -1,20 +1,30 @@ -import Button from "@/components/TempDesignSystem/Button" -import Link from "@/components/TempDesignSystem/Link" +import { HeartIcon } from "@/components/Icons" +import Body from "@/components/TempDesignSystem/Text/Body" + +import { mapFacilityToIcon } from "../../../data" import styles from "./amenity.module.css" import type { AmenityProps } from "@/types/components/hotelPage/sidepeek/amenity" -export default function Amenity({ name, buttonUrl }: AmenityProps) { +export default function Amenity({ filteredAmenities }: AmenityProps) { return ( -
- {buttonUrl && ( - - )} -
+ <> + {filteredAmenities.map((amenity) => { + const Icon = mapFacilityToIcon(amenity.id) + return ( +
+
+ {Icon ? ( + + ) : ( + + )} + {amenity.name} +
+
+ ) + })} + ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css deleted file mode 100644 index b6d3ba651..000000000 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.wrapper { - padding: var(--Spacing-x1); - border-bottom: 1px solid var(--Base-Border-Subtle); -} - -.amenity { - display: flex; - gap: var(--Spacing-x1); - padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); -} diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx index 2dbbaf80c..d913a643e 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx @@ -1,14 +1,10 @@ import { amenities } from "@/constants/routes/hotelPageParams" -import { HeartIcon } from "@/components/Icons" import Accordion from "@/components/TempDesignSystem/Accordion" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" import SidePeek from "@/components/TempDesignSystem/SidePeek" -import Body from "@/components/TempDesignSystem/Text/Body" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" -import { mapFacilityToIcon } from "../../data" import { AccessibilityAmenity, BreakfastAmenity, @@ -16,11 +12,9 @@ import { MeetingsAmenity, ParkingAmenity, } from "./AccordionAmenities" - -import styles from "./amenities.module.css" +import Amenity from "./Amenity" import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities" -import { IconName } from "@/types/components/icon" export default async function AmenitiesSidePeek({ amenitiesList, @@ -28,7 +22,7 @@ export default async function AmenitiesSidePeek({ const lang = getLang() const intl = await getIntl() - const filterdList = amenitiesList + const filteredAmenities = amenitiesList .filter((filter) => !filter.name.startsWith("Parking")) .filter((filter) => !filter.name.startsWith("Meeting")) .filter((filter) => filter.name !== "Late check-out until 14:00 guaranteed") @@ -39,51 +33,12 @@ export default async function AmenitiesSidePeek({ title={intl.formatMessage({ id: "Amenities" })} > - - - - - - - - - - - - - - - - {filterdList.map((amenity) => { - const Icon = mapFacilityToIcon(amenity.id) - return ( -
-
- {Icon ? ( - - ) : ( - - )} - {amenity.name} -
-
- ) - })} + + + + + +
) diff --git a/types/components/hotelPage/sidepeek/amenity.ts b/types/components/hotelPage/sidepeek/amenity.ts index 9f4756701..35e3f2910 100644 --- a/types/components/hotelPage/sidepeek/amenity.ts +++ b/types/components/hotelPage/sidepeek/amenity.ts @@ -1,4 +1,5 @@ +import type { Hotel } from "@/types/hotel" + export type AmenityProps = { - name: string - buttonUrl?: string + filteredAmenities: Hotel["detailedFacilities"] }