| null {
+ const iconMappings = [
+ {
+ icon: BedDoubleIcon,
+ texts: ["Queen"],
+ },
+ {
+ icon: KingBedSmallIcon,
+ texts: ["King"],
+ },
+ {
+ icon: KingBedSmallIcon,
+ texts: ["CustomOccupancy"],
+ },
+ {
+ icon: BedSingleIcon,
+ texts: ["Twin"],
+ },
+ {
+ icon: BedSingleIcon,
+ texts: ["Single"],
+ },
+ ]
+
+ const icon = iconMappings.find((icon) => icon.texts.includes(name))
+ return icon ? icon.icon : BedSingleIcon
+}
diff --git a/components/SidePeeks/RoomSidePeek/index.tsx b/components/SidePeeks/RoomSidePeek/index.tsx
index 34fc3afca..da46a6f42 100644
--- a/components/SidePeeks/RoomSidePeek/index.tsx
+++ b/components/SidePeeks/RoomSidePeek/index.tsx
@@ -1,11 +1,11 @@
import { useIntl } from "react-intl"
import ImageGallery from "@/components/ImageGallery"
-import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getBedIcon } from "./bedIcon"
import { getFacilityIcon } from "./facilityIcon"
import styles from "./roomSidePeek.module.css"
@@ -79,15 +79,27 @@ export default function RoomSidePeek({
{intl.formatMessage({ id: "booking.basedOnAvailability" })}
- {/* TODO: Get data for bed options */}
+
+ {room.roomTypes.map((roomType) => {
+ const BedIcon = getBedIcon(roomType.mainBed.type)
+ return (
+ -
+ {BedIcon && (
+
+ )}
+
+ {roomType.mainBed.description}
+
+
+ )
+ })}
+
-
-
-
)
}
diff --git a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css
index c76c57877..2e1fb5e6f 100644
--- a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css
+++ b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css
@@ -44,6 +44,12 @@
margin-bottom: var(--Spacing-x-half);
}
+.bedOptions li {
+ display: flex;
+ gap: var(--Spacing-x1);
+ margin-bottom: var(--Spacing-x-half);
+}
+
.noIcon {
margin-left: var(--Spacing-x4);
}