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) { }: MeetingsAndConferencesSidePeekProps) {
const lang = getLang() const lang = getLang()
const intl = await getIntl() const intl = await getIntl()
const mainImage = meetingFacilities?.heroImages[0].imageSizes.medium
const altText = const primaryImage = meetingFacilities?.heroImages[0]?.imageSizes.medium
meetingFacilities?.heroImages[0].metaData.altText || 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" }) intl.formatMessage({ id: "Creative spaces for meetings" })
return ( return (
@@ -37,24 +43,29 @@ export default async function MeetingsAndConferencesSidePeek({
{intl.formatMessage({ id: "Creative spaces for meetings" })} {intl.formatMessage({ id: "Creative spaces for meetings" })}
</Title> </Title>
</Subtitle> </Subtitle>
{mainImage && ( {primaryImage && (
<Image <div className={secondaryImage ? styles.imageContainer : ""}>
src={mainImage} <Image
alt={altText} src={primaryImage}
height={300} alt={primaryAltText}
width={200} height={300}
className={styles.image} 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 && ( {link && (
<div className={styles.buttonContainer}> <div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild> <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 */ ); /* Creates space between the wrapper and buttonContainer */
} }
.imageContainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x2);
}
.image { .image {
width: 100%; width: 100%;
height: 240px; height: 240px;