From 0f0bd7361ea509994209cc4a9b692cbcf90b7e59 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 26 Jun 2024 15:48:35 +0200
Subject: [PATCH] feat: Add hotel page component

---
 .../(public)/[contentType]/[uid]/page.tsx     |  3 ++
 components/ContentType/HotelPage.tsx          | 23 ++++++++++++++
 components/ContentType/hotelPage.module.css   | 31 +++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 components/ContentType/HotelPage.tsx
 create mode 100644 components/ContentType/hotelPage.module.css

diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
index 20d8b784a..4940a4c1f 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation"
 
 import ContentPage from "@/components/ContentType/ContentPage"
+import HotelPage from "@/components/ContentType/HotelPage"
 import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
 
 import {
@@ -18,6 +19,8 @@ export default async function ContentTypePage({
       return <ContentPage />
     case "loyalty-page":
       return <LoyaltyPage lang={params.lang} />
+    case "hotel-page":
+      return <HotelPage lang={params.lang} />
     default:
       const type: never = params.contentType
       console.error(`Unsupported content type given: ${type}`)
diff --git a/components/ContentType/HotelPage.tsx b/components/ContentType/HotelPage.tsx
new file mode 100644
index 000000000..923089fb1
--- /dev/null
+++ b/components/ContentType/HotelPage.tsx
@@ -0,0 +1,23 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import MaxWidth from "@/components/MaxWidth"
+
+import Title from "../TempDesignSystem/Text/Title"
+
+import styles from "./loyaltyPage.module.css"
+
+import type { LangParams } from "@/types/params"
+
+export default async function HotelPage({ lang }: LangParams) {
+  const hotelPage = await serverClient().contentstack.hotelPage.get()
+  if (!hotelPage) {
+    return null
+  }
+  return (
+    <section className={styles.content}>
+      <MaxWidth className={styles.blocks} tag="main">
+        <Title>ID: {hotelPage.hotel_page_id}</Title>
+      </MaxWidth>
+    </section>
+  )
+}
diff --git a/components/ContentType/hotelPage.module.css b/components/ContentType/hotelPage.module.css
new file mode 100644
index 000000000..4f58a2d45
--- /dev/null
+++ b/components/ContentType/hotelPage.module.css
@@ -0,0 +1,31 @@
+.content {
+  display: grid;
+  padding-bottom: var(--Spacing-x9);
+  padding-left: var(--Spacing-x0);
+  padding-right: var(--Spacing-x0);
+  position: relative;
+}
+
+.blocks {
+  display: grid;
+  gap: var(--Spacing-x5);
+  padding-left: var(--Spacing-x2);
+  padding-right: var(--Spacing-x2);
+}
+
+@media screen and (min-width: 1367px) {
+  .content {
+    gap: var(--Spacing-x3);
+    padding-left: var(--Spacing-x3);
+    padding-right: var(--Spacing-x3);
+  }
+
+  .blocks {
+    padding-left: var(--Spacing-x0);
+    padding-right: var(--Spacing-x0);
+  }
+
+  .blocks > section:first-of-type > header {
+    gap: var(--Spacing-x2);
+  }
+}