feat: add SidePeek

components/ContentType/HotelPage/HotelPage.tsx

@@ -1,8 +1,11 @@
+import Link from "next/link"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import AmenitiesList from "./AmenitiesList"
 import IntroSection from "./IntroSection"
 import { Rooms } from "./Rooms"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
 
 import styles from "./hotelPage.module.css"
 
@@ -35,6 +38,15 @@ export default async function HotelPage({ lang }: LangParams) {
         <AmenitiesList detailedFacilities={attributes.detailedFacilities} />
       </div>
       <Rooms rooms={roomCategories} />
+      <Link href={"?sidepeek=restaurantbar"} scroll={false}>
+        Restaurant and bar
+      </Link>
+      <Link href={"?sidepeek=gym"} scroll={false}>
+        Gym
+      </Link>
+      <Link href={"?sidepeek=meetings"} scroll={false}>
+        Meetings
+      </Link>
     </main>
   )
 }

components/TempDesignSystem/SidePeek/index.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { ReactNode, useEffect, useState } from "react"
+import { Button, Dialog, DialogTrigger, Modal } from "react-aria-components"
+import { X } from "react-feather"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./sidePeek.module.css"
+
+type SidePeekProps = {
+  content: Record<string, { title: string; content: ReactNode }>
+}
+export default function SidePeek({ content }: SidePeekProps) {
+  const [sidePeekContent, setSidePeekContent] = useState<string | null>(null)
+
+  const searchParams = useSearchParams()
+  const activeSidePeek = searchParams.get("sidepeek")
+  const router = useRouter()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (activeSidePeek) {
+      setSidePeekContent(activeSidePeek)
+    }
+  }, [activeSidePeek])
+
+  const activeContent = sidePeekContent && content[sidePeekContent]
+
+  function handleClose(isOpen: boolean) {
+    if (!isOpen) {
+      console.log("closing the modal now")
+      setSidePeekContent(null)
+
+      const nextSearchParams = new URLSearchParams(searchParams.toString())
+      nextSearchParams.delete("sidepeek")
+
+      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
+    }
+  }
+
+  return (
+    <DialogTrigger>
+      <Modal
+        className={styles.sidePeek}
+        isOpen={!!activeContent}
+        onOpenChange={handleClose}
+      >
+        <Dialog className={styles.dialog}>
+          {({ close }) => (
+            <aside className={styles.content}>
+              <header className={styles.header}>
+                {activeContent && (
+                  <Title level={"h2"} as={"h3"}>
+                    {activeContent.title}
+                  </Title>
+                )}
+                <Button onPress={close} className={styles.closeBtn}>
+                  <X height={32} width={32} className={styles.closeIcon} />
+                </Button>
+              </header>
+              {activeContent && activeContent.content}
+            </aside>
+          )}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  )
+}

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -0,0 +1,94 @@
+.sidePeek {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0px;
+  width: 600px;
+  background-color: var(--Base-Background-Normal);
+  z-index: 100;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
+}
+
+.sidePeek[data-entering] {
+  animation: slide-in 250ms;
+}
+
+.sidePeek[data-exiting] {
+  animation: slide-in 250ms reverse;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.title {
+  text-transform: uppercase;
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.closeBtn {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+}
+
+.closeIcon {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.dialog {
+  height: 100%;
+}
+
+.content {
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: var(--Spacing-x4);
+  height: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x5);
+}
+
+@keyframes slide-in {
+  from {
+    right: -600px;
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    top: 100vh;
+  }
+
+  to {
+    top: 70.047px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .sidePeek {
+    right: auto;
+    top: 70.047px;
+    width: 100%;
+    height: calc(100vh - 70.047px);
+  }
+
+  .sidePeek[data-entering] {
+    animation: slide-up 300ms;
+  }
+
+  .sidePeek[data-exiting] {
+    animation: slide-up 300ms reverse;
+  }
+}