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

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>
   )
 }