diff --git a/components/ContentType/DestinationPage/CityListing/CityListingItem/cityListingItem.module.css b/components/ContentType/DestinationPage/CityListing/CityListingItem/cityListingItem.module.css new file mode 100644 index 000000000..912b96ed3 --- /dev/null +++ b/components/ContentType/DestinationPage/CityListing/CityListingItem/cityListingItem.module.css @@ -0,0 +1,39 @@ +.container { + background-color: var(--Base-Surface-Primary-light-Normal); + border: 1px solid var(--Base-Border-Subtle); + border-radius: var(--Corner-radius-Medium); + overflow: hidden; +} + +.image { + width: 100%; + max-height: 200px; + object-fit: cover; +} + +.content { + display: grid; + gap: var(--Spacing-x2); + padding: var(--Spacing-x2) var(--Spacing-x3); +} + +@media screen and (min-width: 768px) { + .container { + display: grid; + grid-template-columns: minmax(250px, 350px) auto; + } + + .image { + max-height: none; + height: 100%; + } + + .ctaWrapper { + display: flex; + justify-content: flex-end; + } + + .button { + width: min(100%, 200px); + } +} diff --git a/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx b/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx new file mode 100644 index 000000000..b2ec89211 --- /dev/null +++ b/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx @@ -0,0 +1,61 @@ +import Link from "next/link" + +import Image from "@/components/Image" +import Button from "@/components/TempDesignSystem/Button" +import Divider from "@/components/TempDesignSystem/Divider" +import Body from "@/components/TempDesignSystem/Text/Body" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import { getIntl } from "@/i18n" + +import ExperienceList from "../../ExperienceList" + +import styles from "./cityListingItem.module.css" + +import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage" + +interface CityListingItemProps { + city: DestinationCityListItem +} + +export default async function CityListingItem({ city }: CityListingItemProps) { + const intl = await getIntl() + const firstImage = city.images[0] + + return ( +
+ {firstImage.meta.alt +
+ +

{city.heading}

+ + + {city.preamble} + + + +
+ +
+
+
+ ) +} diff --git a/components/ContentType/DestinationPage/CityListing/cityListing.module.css b/components/ContentType/DestinationPage/CityListing/cityListing.module.css new file mode 100644 index 000000000..4bde934e7 --- /dev/null +++ b/components/ContentType/DestinationPage/CityListing/cityListing.module.css @@ -0,0 +1,10 @@ +.container { + display: grid; + gap: var(--Spacing-x2); +} + +.cityList { + list-style: none; + display: grid; + gap: var(--Spacing-x2); +} diff --git a/components/ContentType/DestinationPage/CityListing/index.tsx b/components/ContentType/DestinationPage/CityListing/index.tsx new file mode 100644 index 000000000..639d46e09 --- /dev/null +++ b/components/ContentType/DestinationPage/CityListing/index.tsx @@ -0,0 +1,36 @@ +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import { getIntl } from "@/i18n" + +import CityListingItem from "./CityListingItem" + +import styles from "./cityListing.module.css" + +import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage" + +interface CityListingProps { + cities: DestinationCityListItem[] +} + +export default async function CityListing({ cities }: CityListingProps) { + const intl = await getIntl() + + return ( +
+
+ + {intl.formatMessage( + { id: `{count} Locations` }, + { count: cities.length } + )} + +
+ +
+ ) +} diff --git a/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/components/ContentType/DestinationPage/DestinationCityPage/index.tsx index ccd5ceecb..c55979f70 100644 --- a/components/ContentType/DestinationPage/DestinationCityPage/index.tsx +++ b/components/ContentType/DestinationPage/DestinationCityPage/index.tsx @@ -4,17 +4,16 @@ import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests" import Breadcrumbs from "@/components/Breadcrumbs" import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton" -import Chip from "@/components/TempDesignSystem/Chip" import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" import TrackingSDK from "@/components/TrackingSDK" import { getIntl } from "@/i18n" +import ExperienceList from "../ExperienceList" import SidebarContentWrapper from "../SidebarContentWrapper" import DestinationPageSidePeek from "../Sidepeek" import StaticMap from "../StaticMap" import TopImages from "../TopImages" -import { mapExperiencesToListData } from "../utils" import styles from "./destinationCityPage.module.css" @@ -41,7 +40,6 @@ export default async function DestinationCityPage() { sidepeek_content, destination_settings, } = destinationCityPage - const experiencesList = await mapExperiencesToListData(experiences) return ( <> @@ -60,16 +58,7 @@ export default async function DestinationCityPage() { {heading} {preamble} - + {has_sidepeek && ( @@ -53,23 +52,13 @@ export default async function DestinationCountryPage() {
- {/* TODO: Add city listing by cityIdentifier */} - {">>>> MAIN CONTENT <<<<"} +