Merged in feat/sw-587-sidepeek-for-room (pull request #767)

Create the sidepeek for a specific roomtype. This also changes the lightbox to use react-aria instead of radix-ui, so we use the same for the lightbox and the sidepeek. Works better together!


Approved-by: Bianca Widstam

components/Lightbox/index.tsx

@@ -1,7 +1,7 @@
 "use client"
-import * as Dialog from "@radix-ui/react-dialog"
 import { AnimatePresence, motion } from "framer-motion"
 import React, { useState } from "react"
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 
 import FullView from "./FullView"
 import Gallery from "./Gallery"
@@ -62,20 +62,16 @@ export default function Lightbox({
   return (
     <>
       {triggerElement}
-      <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
-        <AnimatePresence>
-          {isOpen && (
-            <Dialog.Portal forceMount>
-              <Dialog.Overlay asChild>
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className={styles.overlay}
-                />
-              </Dialog.Overlay>
-              <Dialog.Content asChild>
+      <ModalOverlay
+        isOpen={isOpen}
+        onOpenChange={handleOpenChange}
+        className={styles.overlay}
+        isDismissable
+      >
+        <Modal>
+          <AnimatePresence>
+            {isOpen && (
+              <Dialog>
                 <motion.div
                   className={`${styles.content} ${
                     isFullView ? styles.fullViewContent : styles.galleryContent
@@ -109,11 +105,11 @@ export default function Lightbox({
                     />
                   )}
                 </motion.div>
-              </Dialog.Content>
-            </Dialog.Portal>
-          )}
-        </AnimatePresence>
-      </Dialog.Root>
+              </Dialog>
+            )}
+          </AnimatePresence>
+        </Modal>
+      </ModalOverlay>
     </>
   )
 }