fix(SW-239): make contents in sidepeek component render serverside for seo

components/TempDesignSystem/SidePeek/Content/index.tsx

@@ -13,7 +13,6 @@ import styles from "./content.module.css"
 export default function Content({
   title,
   children,
-  contentKey,
   isActive = false,
   onClose,
 }: PropsWithChildren<SidePeekContentProps>) {

components/TempDesignSystem/SidePeek/index.tsx

@@ -1,7 +1,13 @@
 "use client"
 
+import { useIsSSR } from "@react-aria/ssr"
 import { Children, cloneElement, PropsWithChildren } from "react"
-import { Dialog, DialogTrigger, Modal } from "react-aria-components"
+import {
+  Dialog,
+  DialogTrigger,
+  Modal,
+  ModalOverlay,
+} from "react-aria-components"
 
 import { SidePeekProps } from "./types"
 
@@ -12,25 +18,31 @@ export default function SidePeek({
   onClose,
   activeContent,
 }: PropsWithChildren<SidePeekProps>) {
-  return (
+  const isSSR = useIsSSR()
+  return isSSR ? (
+    <div>{children}</div>
+  ) : (
     <DialogTrigger>
-      <Modal
-        className={styles.sidePeek}
+      <ModalOverlay
+        className={styles.overlay}
         isOpen={!!activeContent}
         onOpenChange={onClose}
+        isDismissable
       >
-        <Dialog className={styles.dialog}>
-          {({ close }) => (
-            <>
-              {Children.map(children, (child) => {
-                return cloneElement(child as React.ReactElement, {
-                  onClose: close,
-                })
-              })}
-            </>
-          )}
-        </Dialog>
-      </Modal>
+        <Modal className={styles.sidePeek}>
+          <Dialog className={styles.dialog}>
+            {({ close }) => (
+              <>
+                {Children.map(children, (child) => {
+                  return cloneElement(child as React.ReactElement, {
+                    onClose: close,
+                  })
+                })}
+              </>
+            )}
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
     </DialogTrigger>
   )
 }

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -22,6 +22,14 @@
   height: 100%;
 }
 
+.overlay {
+  position: absolute;
+  top: 70.047px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
 @keyframes slide-in {
   from {
     right: -600px;
@@ -56,4 +64,7 @@
   .sidePeek[data-exiting] {
     animation: slide-in 250ms reverse;
   }
+  .overlay {
+    top: 0;
+  }
 }

components/TempDesignSystem/SidePeek/types.ts

@@ -1,4 +1,4 @@
-export type SidePeekContentKey = "amenities" | "read_more_about_the_hotel"
+export type SidePeekContentKey = string
 
 export type SidePeekProps = {
   activeContent: string | null