scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-936): add descriptions

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-29 16:41:57 +01:00
parent 159464d672
commit 2fb4f6a702
5 changed files with 43 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
View File

@@ -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 (
<SidePeek
contentKey={meetingsAndConferences[lang]}
@@ -29,30 +37,33 @@ export default async function MeetingsAndConferencesSidePeek({
{intl.formatMessage({ id: "Creative spaces for meetings" })}
</Title>
</Subtitle>
<div className={styles.information}>
{mainImage && (
<Image
src=""
alt=""
src={mainImage}
alt={altText}
height={300}
width={200}
className={styles.image}
/>
<Image
src=""
alt=""
height={300}
width={200}
className={styles.image}
/>
<div className={styles.text}>{meetingFacilities?.headingText}</div>
</div>
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild>
<Link href="" weight="bold" color="burgundy">
{intl.formatMessage({ id: "About meetings & conferences" })}
</Link>
</Button>
)}
<Body color="uiTextHighContrast">{descriptions.medium}</Body>
<div>
<Body color="uiTextMediumContrast">
[Min to Max capacity square meter info]
</Body>
<Body color="uiTextMediumContrast">
[Min to Max capacity persons info]
</Body>
</div>
{link && (
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild>
<Link href={link} weight="bold" color="burgundy">
{intl.formatMessage({ id: "About meetings & conferences" })}
</Link>
</Button>
</div>
)}
</div>
</SidePeek>
)

19
components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css
View File

@@ -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 {

1
components/ContentType/HotelPage/SidePeeks/index.ts
View File

@@ -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"

17
components/ContentType/HotelPage/index.tsx
View File

@@ -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 && (
<ActivitiesSidePeek contentPage={activitiesCard.contentPage} />
)}
<SidePeek
contentKey={meetingsAndConferences[lang]}
title={intl.formatMessage({ id: "Meetings & Conferences" })}
>
{/* TODO */}
Meetings & Conferences
</SidePeek>
<MeetingsAndConferencesSidePeek
meetingFacilities={conferencesAndMeetings}
descriptions={hotelContent.texts.meetingDescription}
/>
{roomCategories.map((room) => (
<RoomSidePeek key={room.name} room={room} />
))}

2
types/components/hotelPage/sidepeek/meetingsAndConferences.ts
View File

@@ -2,4 +2,6 @@ import type { Hotel } from "@/types/hotel"
export type MeetingsAndConferencesSidePeekProps = {
meetingFacilities: Hotel["conferencesAndMeetings"]
descriptions: Hotel["hotelContent"]["texts"]["meetingDescription"]
link?: string
}