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

feat(SW-936): add secondary image

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-12-02 20:38:49 +01:00
parent 2fb4f6a702
commit 7e93d59842
2 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,9 +21,15 @@ export default async function MeetingsAndConferencesSidePeek({
}: MeetingsAndConferencesSidePeekProps) {
const lang = getLang()
const intl = await getIntl()
const mainImage = meetingFacilities?.heroImages[0].imageSizes.medium
const altText =
meetingFacilities?.heroImages[0].metaData.altText ||
const primaryImage = meetingFacilities?.heroImages[0]?.imageSizes.medium
const primaryAltText =
meetingFacilities?.heroImages[0]?.metaData.altText ||
intl.formatMessage({ id: "Creative spaces for meetings" })
const secondaryImage = meetingFacilities?.heroImages[1]?.imageSizes.medium
const secondaryAltText =
meetingFacilities?.heroImages[1]?.metaData.altText ||
intl.formatMessage({ id: "Creative spaces for meetings" })
return (
@@ -37,24 +43,29 @@ export default async function MeetingsAndConferencesSidePeek({
{intl.formatMessage({ id: "Creative spaces for meetings" })}
</Title>
</Subtitle>
{mainImage && (
<Image
src={mainImage}
alt={altText}
height={300}
width={200}
className={styles.image}
/>
{primaryImage && (
<div className={secondaryImage ? styles.imageContainer : ""}>
<Image
src={primaryImage}
alt={primaryAltText}
height={300}
width={200}
className={styles.image}
/>
{secondaryImage && (
<Image
src={secondaryImage}
alt={secondaryAltText}
height={300}
width={200}
className={styles.image}
/>
)}
</div>
)}
{descriptions?.medium && (
<Body color="uiTextHighContrast">{descriptions.medium}</Body>
)}
<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>

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

@@ -6,6 +6,12 @@
); /* Creates space between the wrapper and buttonContainer */
}
.imageContainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x2);
}
.image {
width: 100%;
height: 240px;