diff --git a/components/Icons/BedSingle.tsx b/components/Icons/BedSingle.tsx new file mode 100644 index 000000000..0e9aaa68f --- /dev/null +++ b/components/Icons/BedSingle.tsx @@ -0,0 +1,29 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BedSingleIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/KingBedSmall.tsx b/components/Icons/KingBedSmall.tsx new file mode 100644 index 000000000..711ce0f12 --- /dev/null +++ b/components/Icons/KingBedSmall.tsx @@ -0,0 +1,29 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function KingBedSmallIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx index fc6e5c069..1bc195717 100644 --- a/components/Icons/index.tsx +++ b/components/Icons/index.tsx @@ -9,6 +9,7 @@ export { default as ArrowRightIcon } from "./ArrowRight" export { default as BarIcon } from "./Bar" export { default as BathtubIcon } from "./Bathtub" export { default as BedDoubleIcon } from "./BedDouble" +export { default as BedSingleIcon } from "./BedSingle" export { default as BikingIcon } from "./Biking" export { default as BreakfastIcon } from "./Breakfast" export { default as BusinessIcon } from "./Business" @@ -77,6 +78,7 @@ export { default as IronIcon } from "./Iron" export { default as KayakingIcon } from "./Kayaking" export { default as KettleIcon } from "./Kettle" export { default as KingBedIcon } from "./KingBed" +export { default as KingBedSmallIcon } from "./KingBedSmall" export { default as LampIcon } from "./Lamp" export { default as LaundryMachineIcon } from "./LaundryMachine" export { default as LocalBarIcon } from "./LocalBar" diff --git a/components/SidePeeks/RoomSidePeek/bedIcon.ts b/components/SidePeeks/RoomSidePeek/bedIcon.ts new file mode 100644 index 000000000..41947bd77 --- /dev/null +++ b/components/SidePeeks/RoomSidePeek/bedIcon.ts @@ -0,0 +1,37 @@ +import { FC } from "react" + +import { + BedDoubleIcon, + BedSingleIcon, + KingBedSmallIcon, +} from "@/components/Icons" + +import { IconProps } from "@/types/components/icon" + +export function getBedIcon(name: string): FC | 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 */} + -
- -
) } 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); }