diff --git a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx index 637c4533c..21ca2b336 100644 --- a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx @@ -4,6 +4,7 @@ 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" @@ -11,13 +12,20 @@ import { getLang } from "@/i18n/serverContext" import styles from "./meetingsAndConferences.module.css" -import { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences" +import type { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences" export default async function MeetingsAndConferencesSidePeek({ meetingFacilities, + descriptions, + link, }: MeetingsAndConferencesSidePeekProps) { const lang = getLang() const intl = await getIntl() + const mainImage = meetingFacilities?.heroImages[0].imageSizes.medium + const altText = + meetingFacilities?.heroImages[0].metaData.altText || + intl.formatMessage({ id: "Creative spaces for meetings" }) + return ( -
+ {mainImage && ( - -
{meetingFacilities?.headingText}
-
-
- + )} + {descriptions.medium} +
+ + [Min to Max capacity square meter info] + + + [Min to Max capacity persons info] +
+ {link && ( +
+ +
+ )}
) diff --git a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css index b150919a4..058c7338b 100644 --- a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css +++ b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css @@ -1,27 +1,16 @@ .wrapper { - display: flex; - flex-direction: column; - gap: var(--Spacing-x4); + display: grid; + gap: var(--Spacing-x3); margin-bottom: calc( var(--Spacing-x4) * 2 + 80px ); /* Creates space between the wrapper and buttonContainer */ } -.information { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - gap: var(--Spacing-x2); -} - .image { width: 100%; - height: 175px; + height: 240px; object-fit: cover; -} - -.text { - grid-column: 1 / 3; + border-radius: var(--Corner-radius-Medium); } .buttonContainer { diff --git a/components/ContentType/HotelPage/SidePeeks/index.ts b/components/ContentType/HotelPage/SidePeeks/index.ts index e7233e010..f8de0f861 100644 --- a/components/ContentType/HotelPage/SidePeeks/index.ts +++ b/components/ContentType/HotelPage/SidePeeks/index.ts @@ -1,5 +1,6 @@ export { default as AboutTheHotelSidePeek } from "./AboutTheHotel" export { default as ActivitiesSidePeek } from "./Activities" export { default as AmenitiesSidePeek } from "./Amenities" +export { default as MeetingsAndConferencesSidePeek } from "./MeetingsAndConferences" export { default as RoomSidePeek } from "./Room" export { default as WellnessAndExerciseSidePeek } from "./WellnessAndExercise" diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx index a9125edf6..38002af81 100644 --- a/components/ContentType/HotelPage/index.tsx +++ b/components/ContentType/HotelPage/index.tsx @@ -1,9 +1,6 @@ import { notFound } from "next/navigation" -import { - meetingsAndConferences, - restaurantAndBar, -} from "@/constants/routes/hotelPageParams" +import { restaurantAndBar } from "@/constants/routes/hotelPageParams" import { env } from "@/env/server" import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests" @@ -30,6 +27,7 @@ import { AboutTheHotelSidePeek, ActivitiesSidePeek, AmenitiesSidePeek, + MeetingsAndConferencesSidePeek, RoomSidePeek, WellnessAndExerciseSidePeek, } from "./SidePeeks" @@ -203,13 +201,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) { {activitiesCard && ( )} - - {/* TODO */} - Meetings & Conferences - + {roomCategories.map((room) => ( ))} diff --git a/types/components/hotelPage/sidepeek/meetingsAndConferences.ts b/types/components/hotelPage/sidepeek/meetingsAndConferences.ts index abbfc8214..50dc76da0 100644 --- a/types/components/hotelPage/sidepeek/meetingsAndConferences.ts +++ b/types/components/hotelPage/sidepeek/meetingsAndConferences.ts @@ -2,4 +2,6 @@ import type { Hotel } from "@/types/hotel" export type MeetingsAndConferencesSidePeekProps = { meetingFacilities: Hotel["conferencesAndMeetings"] + descriptions: Hotel["hotelContent"]["texts"]["meetingDescription"] + link?: string }