fix: make contentKey type safe

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -3,6 +3,7 @@ import { ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import SidePeekContainer from "@/components/TempDesignSystem/SidePeek/Container"
 import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
+import { generateSidePeekLink } from "@/components/TempDesignSystem/SidePeek/data"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
@@ -17,6 +18,7 @@ export default async function AmenitiesList({
   detailedFacilities: HotelData["data"]["attributes"]["detailedFacilities"]
 }) {
   const { formatMessage } = await getIntl()
+  const sidePeekLink = generateSidePeekLink("amenities")
   const sortedAmenities = detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
@@ -36,12 +38,7 @@ export default async function AmenitiesList({
           )
         })}
       </div>
-      <Link
-        scroll={false}
-        href={"?sidepeek=amenities"}
-        color="burgundy"
-        variant="icon"
-      >
+      <Link scroll={false} href={sidePeekLink} color="burgundy" variant="icon">
         {formatMessage({ id: "Show all amenities" })}
         <ChevronRightIcon />
       </Link>

components/TempDesignSystem/SidePeek/Container/index.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import React, { Children, cloneElement, useEffect, useState } from "react"
 
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
 
 export default function SidePeekContainer({
   children,
@@ -11,14 +12,18 @@ export default function SidePeekContainer({
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const [activeSidePeek, setActiveSidePeek] = useState<string | null>(() => {
-    const sidePeekParam = searchParams.get("sidepeek")
-
-    return sidePeekParam || null
-  })
+  const [activeSidePeek, setActiveSidePeek] =
+    useState<SidePeekContentKey | null>(() => {
+      const sidePeekParam = searchParams.get(
+        "sidepeek"
+      ) as SidePeekContentKey | null
+      return sidePeekParam || null
+    })
 
   useEffect(() => {
-    const sidePeekParam = searchParams.get("sidepeek")
+    const sidePeekParam = searchParams.get(
+      "sidepeek"
+    ) as SidePeekContentKey | null
     if (sidePeekParam !== activeSidePeek) {
       setActiveSidePeek(sidePeekParam)
     }
@@ -39,7 +44,8 @@ export default function SidePeekContainer({
       return child
     }
     return cloneElement(child as React.ReactElement, {
-      isActive: child.props.contentKey === activeSidePeek,
+      isActive:
+        (child.props.contentKey as SidePeekContentKey) === activeSidePeek,
     })
   })
 

components/TempDesignSystem/SidePeek/data.ts

@@ -0,0 +1,5 @@
+import { SidePeekContentKey } from "./types"
+
+export const generateSidePeekLink = (key: SidePeekContentKey) => {
+  return `?sidepeek=${key}`
+}

components/TempDesignSystem/SidePeek/types.ts

@@ -1,3 +1,5 @@
+export type SidePeekContentKey = "amenities" | "read_more_about_the_hotel"
+
 export type SidePeekProps = {
   activeContent: string | null
   onClose: (isOpen: boolean) => void
@@ -5,7 +7,7 @@ export type SidePeekProps = {
 
 export type SidePeekContentProps = {
   title?: string
-  contentKey: string
+  contentKey: SidePeekContentKey
   isActive?: boolean
   onClose?: () => void
 }