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

Added See on map button

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-29 12:07:20 +01:00
parent 05b0d06c7c
commit 3ad8bf0197
2 changed files with 48 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
View File

@@ -19,7 +19,20 @@
padding: var(--Spacing-x2) var(--Spacing-x0); padding: var(--Spacing-x2) var(--Spacing-x0);
} }
.mapContainer {
display: none;
}
.buttonContainer {
display: flex;
gap: var(--Spacing-x2);
margin-bottom: var(--Spacing-x3);
}
@media (min-width: 768px) { @media (min-width: 768px) {
.mapContainer {
display: block;
}
.main { .main {
flex-direction: row; flex-direction: row;
} }

55
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
View File

@@ -13,8 +13,9 @@ import {
generateChildrenString, generateChildrenString,
getHotelReservationQueryParams, getHotelReservationQueryParams,
} from "@/components/HotelReservation/SelectRate/RoomSelection/utils" } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
import { ChevronRightIcon } from "@/components/Icons" import { ChevronRightIcon, MapIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap" import StaticMap from "@/components/Maps/StaticMap"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
@@ -62,25 +63,39 @@ export default async function SelectHotelPage({
return ( return (
<main className={styles.main}> <main className={styles.main}>
<section className={styles.section}> <section className={styles.section}>
<Link href={selectHotelMap[params.lang]} keepSearchParams> <div className={styles.mapContainer}>
<StaticMap <Link href={selectHotelMap[params.lang]} keepSearchParams>
city={searchParams.city} <StaticMap
width={340} city={searchParams.city}
height={180} width={340}
zoomLevel={11} height={180}
mapType="roadmap" zoomLevel={11}
altText={`Map of ${searchParams.city} city center`} mapType="roadmap"
/> altText={`Map of ${searchParams.city} city center`}
</Link> />
<Link </Link>
className={styles.link} <Link
color="burgundy" className={styles.link}
href={selectHotelMap[params.lang]} color="burgundy"
keepSearchParams href={selectHotelMap[params.lang]}
> keepSearchParams
{intl.formatMessage({ id: "Show map" })} >
<ChevronRightIcon color="burgundy" /> {intl.formatMessage({ id: "Show map" })}
</Link> <ChevronRightIcon color="burgundy" />
</Link>
</div>
<div className={styles.buttonContainer}>
<Button asChild variant="icon" intent="secondary" size="small">
<Link
prefetch={false}
color="none"
href={selectHotelMap[params.lang]}
>
<MapIcon color="burgundy" />
{intl.formatMessage({ id: "See on map" })}
</Link>
</Button>
</div>
<HotelFilter filters={filterList} /> <HotelFilter filters={filterList} />
</section> </section>
<HotelCardListing hotelData={hotels} /> <HotelCardListing hotelData={hotels} />