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

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

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

@@ -1,27 +1,16 @@
.wrapper { .wrapper {
display: flex; display: grid;
flex-direction: column; gap: var(--Spacing-x3);
gap: var(--Spacing-x4);
margin-bottom: calc( margin-bottom: calc(
var(--Spacing-x4) * 2 + 80px var(--Spacing-x4) * 2 + 80px
); /* Creates space between the wrapper and buttonContainer */ ); /* 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 { .image {
width: 100%; width: 100%;
height: 175px; height: 240px;
object-fit: cover; object-fit: cover;
} border-radius: var(--Corner-radius-Medium);
.text {
grid-column: 1 / 3;
} }
.buttonContainer { .buttonContainer {

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

@@ -1,5 +1,6 @@
export { default as AboutTheHotelSidePeek } from "./AboutTheHotel" export { default as AboutTheHotelSidePeek } from "./AboutTheHotel"
export { default as ActivitiesSidePeek } from "./Activities" export { default as ActivitiesSidePeek } from "./Activities"
export { default as AmenitiesSidePeek } from "./Amenities" export { default as AmenitiesSidePeek } from "./Amenities"
export { default as MeetingsAndConferencesSidePeek } from "./MeetingsAndConferences"
export { default as RoomSidePeek } from "./Room" export { default as RoomSidePeek } from "./Room"
export { default as WellnessAndExerciseSidePeek } from "./WellnessAndExercise" export { default as WellnessAndExerciseSidePeek } from "./WellnessAndExercise"

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

@@ -1,9 +1,6 @@
import { notFound } from "next/navigation" import { notFound } from "next/navigation"
import { import { restaurantAndBar } from "@/constants/routes/hotelPageParams"
meetingsAndConferences,
restaurantAndBar,
} from "@/constants/routes/hotelPageParams"
import { env } from "@/env/server" import { env } from "@/env/server"
import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests" import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
@@ -30,6 +27,7 @@ import {
AboutTheHotelSidePeek, AboutTheHotelSidePeek,
ActivitiesSidePeek, ActivitiesSidePeek,
AmenitiesSidePeek, AmenitiesSidePeek,
MeetingsAndConferencesSidePeek,
RoomSidePeek, RoomSidePeek,
WellnessAndExerciseSidePeek, WellnessAndExerciseSidePeek,
} from "./SidePeeks" } from "./SidePeeks"
@@ -203,13 +201,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
{activitiesCard && ( {activitiesCard && (
<ActivitiesSidePeek contentPage={activitiesCard.contentPage} /> <ActivitiesSidePeek contentPage={activitiesCard.contentPage} />
)} )}
<SidePeek <MeetingsAndConferencesSidePeek
contentKey={meetingsAndConferences[lang]} meetingFacilities={conferencesAndMeetings}
title={intl.formatMessage({ id: "Meetings & Conferences" })} descriptions={hotelContent.texts.meetingDescription}
> />
{/* TODO */}
Meetings & Conferences
</SidePeek>
{roomCategories.map((room) => ( {roomCategories.map((room) => (
<RoomSidePeek key={room.name} room={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 = { export type MeetingsAndConferencesSidePeekProps = {
meetingFacilities: Hotel["conferencesAndMeetings"] meetingFacilities: Hotel["conferencesAndMeetings"]
descriptions: Hotel["hotelContent"]["texts"]["meetingDescription"]
link?: string
} }