diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css new file mode 100644 index 000000000..fea710da0 --- /dev/null +++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css @@ -0,0 +1,17 @@ +.cityListWrapper { + display: grid; + gap: var(--Spacing-x3); +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--Spacing-x2); +} + +.cityList { + display: grid; + gap: var(--Spacing-x3); + list-style: none; +} diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/index.tsx b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/index.tsx new file mode 100644 index 000000000..2110d772f --- /dev/null +++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/index.tsx @@ -0,0 +1,36 @@ +import Body from "@/components/TempDesignSystem/Text/Body" +import { getIntl } from "@/i18n" + +import CityListItem from "../CityListItem" + +import styles from "./cityList.module.css" + +import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage" + +interface CityListProps { + cities: DestinationCityListItem[] +} + +export default async function CityList({ cities }: CityListProps) { + const intl = await getIntl() + + return ( +
+
+ + {intl.formatMessage( + { id: "{count} destinations" }, + { count: cities.length } + )} + +
+ +
+ ) +} diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css new file mode 100644 index 000000000..47a7f9771 --- /dev/null +++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css @@ -0,0 +1,22 @@ +.cityListItem { + background-color: var(--Base-Surface-Primary-light-Normal); + border: 1px solid var(--Base-Border-Subtle); + border-radius: var(--Corner-radius-Medium); + overflow: hidden; +} + +.imageWrapper { + position: relative; + height: 200px; + width: 100%; +} + +.imageWrapper img { + object-fit: cover; +} + +.content { + display: grid; + gap: var(--Spacing-x2); + padding: var(--Spacing-x2) var(--Spacing-x3); +} diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx new file mode 100644 index 000000000..d54c84d13 --- /dev/null +++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx @@ -0,0 +1,51 @@ +import Link from "next/link" + +import ImageGallery from "@/components/ImageGallery" +import Button from "@/components/TempDesignSystem/Button" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import { getIntl } from "@/i18n" +import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery" + +import ExperienceList from "../../../ExperienceList" + +import styles from "./cityListItem.module.css" + +import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage" + +interface CityListItemProps { + city: DestinationCityListItem +} + +export default async function CityListItem({ city }: CityListItemProps) { + const intl = await getIntl() + const galleryImages = mapImageVaultImagesToGalleryImages(city.images) + + return ( +
+
+ +
+
+ +

{city.heading}

+ + + +
+
+ ) +} diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx index 401d0b7bf..e897b305a 100644 --- a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx +++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx @@ -1,20 +1,31 @@ import { env } from "@/env/server" -import { getHotelsByCountry } from "@/lib/trpc/memoizedRequests" +import { + getDestinationCityPagesByCountry, + getHotelsByCountry, +} from "@/lib/trpc/memoizedRequests" import Title from "@/components/TempDesignSystem/Text/Title" +import { getIntl } from "@/i18n" import Map from "../../Map" +import CityList from "./CityList" import type { Country } from "@/types/enums/country" interface CountryMapProps { country: Country } -export function preloadHotels(country: Country) { + +export function preload(country: Country) { void getHotelsByCountry(country) + void getDestinationCityPagesByCountry(country) } export default async function CountryMap({ country }: CountryMapProps) { - const hotels = await getHotelsByCountry(country) + const intl = await getIntl() + const [hotels, cities] = await Promise.all([ + getHotelsByCountry(country), + getDestinationCityPagesByCountry(country), + ]) return ( -
- - {country} - -
+ + {intl.formatMessage({ id: `Destinations in {country}` }, { country })} + + ) } diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx b/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx index 4dacc76ed..cfbfd92ab 100644 --- a/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx +++ b/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx @@ -16,7 +16,7 @@ import SidebarContentWrapper from "../SidebarContentWrapper" import DestinationPageSidePeek from "../Sidepeek" import StaticMap from "../StaticMap" import TopImages from "../TopImages" -import CountryMap, { preloadHotels } from "./CountryMap" +import CountryMap, { preload } from "./CountryMap" import styles from "./destinationCountryPage.module.css" @@ -42,7 +42,7 @@ export default async function DestinationCountryPage() { destination_settings, } = destinationCountryPage - preloadHotels(destination_settings.country) + preload(destination_settings.country) return ( <> diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 2b6a87103..37fea28ac 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -154,6 +154,7 @@ "Day": "Dag", "Description": "Beskrivelse", "Destination": "Destination", + "Destinations in {country}": "Destinationer i {country}", "Details": "Detaljer", "Dialog": "Dialog", "Didn't receive a code? Resend code": "Didn't receive a code? Resend code", @@ -685,6 +686,7 @@ "{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotel} other {# hoteller}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}", + "{count} destinations": "{count} destinationer", "{count} lowercase letter": "{count} lille bogstav", "{count} number": "{count} nummer", "{count} special character": "{count} speciel karakter", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 8bb1f865d..bf76efa6f 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -155,6 +155,7 @@ "Day": "Tag", "Description": "Beschreibung", "Destination": "Bestimmungsort", + "Destinations in {country}": "Ziele in {country}", "Details": "Details", "Dialog": "Dialog", "Didn't receive a code? Resend code": "Didn't receive a code? Resend code", @@ -685,6 +686,7 @@ "{checkOutDate} from {checkOutTime}": "{checkOutDate} aus {checkOutTime}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# Standort} other {# Standorte}}", + "{count} destinations": "{count} Ziele", "{count} lowercase letter": "{count} Kleinbuchstabe", "{count} number": "{count} nummer", "{count} special character": "{count} sonderzeichen", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index a5fcd9d6a..d44392f75 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -158,6 +158,7 @@ "Day": "Day", "Description": "Description", "Destination": "Destination", + "Destinations in {country}": "Destinations in {country}", "Details": "Details", "Dialog": "Dialog", "Didn't receive a code? Resend code": "Didn't receive a code? Resend code", @@ -688,6 +689,7 @@ "{checkOutDate} from {checkOutTime}": "{checkOutDate} from {checkOutTime}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {{count} Location} other {{count} Locations}}", + "{count} destinations": "{count} destinations", "{count} lowercase letter": "{count} lowercase letter", "{count} number": "{count} number", "{count} special character": "{count} special character", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index bd1311b63..2c7a81268 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -154,6 +154,7 @@ "Day": "Päivä", "Description": "Kuvaus", "Destination": "Kohde", + "Destinations in {country}": "Kohteet maassa {country}", "Details": "Tiedot", "Dialog": "Dialog", "Didn't receive a code? Resend code": "Didn't receive a code? Resend code", @@ -685,6 +686,7 @@ "{checkOutDate} from {checkOutTime}": "{checkOutDate} alkaen {checkOutTime}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotelli} other {# hotellit}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sijainti} other {# sijainnit}}", + "{count} destinations": "{count} kohdetta", "{count} lowercase letter": "{count} pien kirjain", "{count} number": "{count} määrä", "{count} special character": "{count} erikoishahmo", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 571138b02..c72c168ea 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -153,6 +153,7 @@ "Day": "Dag", "Description": "Beskrivelse", "Destination": "Destinasjon", + "Destinations in {country}": "Destinasjoner i {country}", "Details": "Detaljer", "Dialog": "Dialog", "Didn't receive a code? Resend code": "Didn't receive a code? Resend code", @@ -683,6 +684,7 @@ "{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hoteller}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}", + "{count} destinations": "{count} destinasjoner", "{count} lowercase letter": "{count} liten bokstav", "{count} number": "{count} antall", "{count} special character": "{count} spesiell karakter", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 08ca8b657..d51a346f7 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -153,6 +153,7 @@ "Day": "Dag", "Description": "Beskrivning", "Destination": "Destination", + "Destinations in {country}": "Destinationer i {country}", "Details": "Detaljer", "Dialog": "Dialog", "Didn't receive a code? Resend code": "Didn't receive a code? Resend code", @@ -685,6 +686,7 @@ "{checkOutDate} from {checkOutTime}": "{checkOutDate} från {checkOutTime}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hotell}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# plats} other {# platser}}", + "{count} destinations": "{count} destinationer", "{count} lowercase letter": "{count} liten bokstav", "{count} number": "{count} nummer", "{count} special character": "{count} speciell karaktär",