diff --git a/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css b/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css index ec81ef8e9..7c661d1a6 100644 --- a/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css +++ b/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css @@ -1,2 +1,15 @@ -.wrapper { +.preamble { + margin-bottom: calc( + var(--Spacing-x4) * 2 + 80px + ); /* Creates space between the wrapper and buttonContainer */ +} + +.buttonContainer { + background-color: var(--Base-Background-Primary-Normal); + border-top: 1px solid var(--Base-Border-Subtle); + padding: var(--Spacing-x4) var(--Spacing-x2); + width: 100%; + position: absolute; + left: 0; + bottom: 0; } diff --git a/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx index 19b17bc8d..16a7ae0cb 100644 --- a/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx @@ -1,12 +1,20 @@ import { activities } from "@/constants/routes/hotelPageParams" +import Button from "@/components/TempDesignSystem/Button" +import Link from "@/components/TempDesignSystem/Link" import SidePeek from "@/components/TempDesignSystem/SidePeek" +import Preamble from "@/components/TempDesignSystem/Text/Preamble" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" import styles from "./activities.module.css" -export default async function ActivitiesSidePeek() { +import { ActivitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/activities" + +export default async function ActivitiesSidePeek({ + preamble, + contentPage, +}: ActivitiesSidePeekProps) { const lang = getLang() const intl = await getIntl() return ( @@ -14,7 +22,16 @@ export default async function ActivitiesSidePeek() { contentKey={activities[lang]} title={intl.formatMessage({ id: "Activities" })} > -