feat: Add tab navigation to hotel page

components/ContentType/HotelPage/HotelPage.tsx

@@ -3,6 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 import AmenitiesList from "./AmenitiesList"
 import IntroSection from "./IntroSection"
 import { Rooms } from "./Rooms"
+import TabNavigation from "./TabNavigation"
 
 import styles from "./hotelPage.module.css"
 
@@ -23,18 +24,21 @@ export default async function HotelPage({ lang }: LangParams) {
   })
 
   return (
-    <main className={styles.pageContainer}>
-      <div className={styles.introContainer}>
-        <IntroSection
-          hotelName={attributes.name}
-          hotelDescription={attributes.hotelContent.texts.descriptions.short}
-          location={attributes.location}
-          address={attributes.address}
-          tripAdvisor={attributes.ratings.tripAdvisor}
-        />
-        <AmenitiesList detailedFacilities={attributes.detailedFacilities} />
-      </div>
-      <Rooms rooms={roomCategories} />
-    </main>
+    <div className={styles.pageContainer}>
+      <TabNavigation />
+      <main className={styles.mainSection}>
+        <div className={styles.introContainer}>
+          <IntroSection
+            hotelName={attributes.name}
+            hotelDescription={attributes.hotelContent.texts.descriptions.short}
+            location={attributes.location}
+            address={attributes.address}
+            tripAdvisor={attributes.ratings.tripAdvisor}
+          />
+          <AmenitiesList detailedFacilities={attributes.detailedFacilities} />
+        </div>
+        <Rooms rooms={roomCategories} />
+      </main>
+    </div>
   )
 }

components/ContentType/HotelPage/Rooms/index.tsx

@@ -30,10 +30,10 @@ export async function Rooms({ rooms }: RoomsProps) {
     .sort((a, b) => a.sortOrder - b.sortOrder)
     .slice(0, 3) //TODO: Remove this and render all rooms once we've implemented "show more" logic in SW-203.
   return (
-    <SectionContainer>
+    <SectionContainer id="rooms-section">
       <SectionHeader
         textTransform="uppercase"
-        title={formatMessage({ id: "hotelPages.rooms.title" })}
+        title={formatMessage({ id: "Rooms" })}
         subtitle={null}
       />
       <Grids.Stackable>

components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Link from "@/components/TempDesignSystem/Link"
+import useHash from "@/hooks/useHash"
+
+import { HotelHashValues } from "./types"
+
+import styles from "./tabNavigation.module.css"
+
+export default function TabNavigation() {
+  const hash = useHash()
+  const { formatMessage } = useIntl()
+  const hotelTabLinks: { href: HotelHashValues; text: string }[] = [
+    { href: "#overview", text: "Overview" },
+    { href: "#rooms-section", text: "Rooms" },
+    { href: "#restaurant-and-bar", text: "Restaurant & Bar" },
+    { href: "#meetings-and-conferences", text: "Meetings & Conferences" },
+    { href: "#wellness-and-exercise", text: "Wellness & Exercise" },
+    { href: "#activities", text: "Activities" },
+    { href: "#faq", text: "FAQ" },
+  ]
+  return (
+    <nav className={styles.tabsContainer}>
+      {hotelTabLinks.map((link) => {
+        const isActive =
+          hash === link.href || (hash === "" && link.href === "#overview")
+        console.log("isActive", isActive, "hash", hash, "link.href", link.href)
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            active={isActive}
+            variant="tab"
+            color="burgundy"
+            textDecoration="none"
+          >
+            {formatMessage({ id: link.text })}
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}

components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css

@@ -0,0 +1,11 @@
+.tabsContainer {
+  display: flex;
+  overflow-x: auto;
+  white-space: nowrap;
+  gap: var(--Spacing-x4);
+  background: var(--Base-Surface-Subtle-Normal);
+  justify-content: flex-start;
+  padding-left: var(--Spacing-x4);
+  padding-right: var(--Spacing-x3);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}

components/ContentType/HotelPage/TabNavigation/types.ts

@@ -0,0 +1,8 @@
+export type HotelHashValues =
+  | "#overview"
+  | "#rooms-section"
+  | "#restaurant-and-bar"
+  | "#meetings-and-conferences"
+  | "#wellness-and-exercise"
+  | "#activities"
+  | "#faq"

components/ContentType/HotelPage/hotelPage.module.css

@@ -1,4 +1,13 @@
 .pageContainer {
+  overflow-x: auto;
+}
+
+.pageContainer > * {
+  padding-left: var(--Spacing-x4);
+  padding-right: var(--Spacing-x3);
+}
+
+.mainSection {
   display: grid;
   gap: var(--Spacing-x9);
   padding: var(--Spacing-x5) var(--Spacing-x3) var(--Spacing-x4);
@@ -11,9 +20,14 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .pageContainer {
+  .pageContainer > *:not(nav) {
     padding: var(--Spacing-x9) var(--Spacing-x5);
   }
+
+  .pageContainer > nav {
+    padding-left: var(--Spacing-x5);
+    padding-right: var(--Spacing-x5);
+  }
   .introContainer {
     display: grid;
     /* use justify-content: space between once we have the map component*/