Feature/location landing page

app/home/event/[eventId]/page.tsx

@@ -0,0 +1,49 @@
+import { GetEvent } from "@/lib/api/read/GetEvent";
+import LocationList from "@/components/LocationList";
+import EventPageTransitionWrapper from "@/components/EventPageTransitionWrapper";
+import Heading from "@/components/Heading";
+import { Box } from "@mui/material";
+import HomepageArrow from "@/components/svg/HomepageArrow";
+import BackToEventSelectButton from "@/components/BackToEventSelectButton";
+
+type EventPageParams = {
+  eventId: string;
+};
+
+export default async function LocationSelectPage({
+  params,
+}: {
+  params: Promise<EventPageParams>;
+}) {
+  const event = await GetEvent((await params).eventId);
+
+  return (
+    <>
+      <Box width="45rem" mx="auto" display="flex" flexDirection="column">
+        <Box mt={5}>
+          <Heading />
+        </Box>
+        {event && (
+          <EventPageTransitionWrapper exitDirection="right" entryDirection="right">
+            <div className="flex flex-col gap-4 mt-5">
+              <BackToEventSelectButton />
+              <LocationList eventId={event.id} eventName={event.name} />
+            </div>
+          </EventPageTransitionWrapper>
+        )}
+      </Box>
+      <Box
+        sx={{
+          position: "fixed",
+          width: "75%",
+          left: 0,
+          bottom: 0,
+          zIndex: 0,
+          pointerEvents: "none",
+        }}
+      >
+        <HomepageArrow />
+      </Box>
+    </>
+  );
+}

app/home/page.tsx

@@ -10,11 +10,12 @@
  */
 
 import ErrorToast from "@/components/ErrorToast";
+import EventPageTransitionWrapper from "@/components/EventPageTransitionWrapper";
 import EventSelectForm from "@/components/EventSelectForm";
 import Heading from "@/components/Heading";
 import HomepageArrow from "@/components/svg/HomepageArrow";
 import { prisma } from "@/lib/api/db";
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { Suspense } from "react";
 
 // Collect all events from doradev database
@@ -34,29 +35,30 @@ export default async function EventSelect() {
 
   return (
     <>
-      <Box width="45rem" mx="auto" display="flex" flexDirection="column">
+      <Box width="45rem" mx="auto" display="flex" flexDirection="column" sx={{ position:"relative", zIndex:1 }}>
         <Box mt={5}>
           <Heading />
         </Box>
-
-        <Typography
-          mx="auto"
-          variant="h6"
-          align="center"
-          mt={0.5}
-          mb={1}
-          color="primary.main"
-        >
-          Select an Event
-        </Typography>
-        <EventSelectForm events={events} />
+        <EventPageTransitionWrapper exitDirection="left" entryDirection="left">
+          <EventSelectForm events={events} />
+        </EventPageTransitionWrapper>
         <Suspense>
           <ErrorToast />
         </Suspense>
       </Box>
-      <Box sx={{ width: "75%", position: "fixed" }}>
+      <Box
+        sx={{
+          position: "fixed",
+          width: "75%",
+          left: 0,
+          bottom: 0,
+          zIndex: 0,
+          pointerEvents: "none",
+        }}
+      >
         <HomepageArrow />
       </Box>
     </>
   );
 }
+

components/BackToEventSelectButton.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { usePageTransitionExit } from "@/components/EventPageTransitionWrapper";
+import { useState } from "react";
+
+export default function BackToEventSelectButton() {
+  const router = useRouter();
+  const exit = usePageTransitionExit();
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={disabled}
+      onClick={() => {
+        setDisabled(true);
+        exit(() => router.push("/home"));
+      }}
+    >
+      Back to Event Select
+    </Button>
+  );
+}

components/EventPageTransitionWrapper.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState, ReactNode, createContext, useContext } from "react";
+
+type ExitFn = (after?: () => void) => void;
+const ExitContext = createContext<ExitFn | null>(null);
+export function usePageTransitionExit() {
+  const ctx = useContext(ExitContext);
+  if (!ctx) throw new Error("usePageTransitionExit must be used within EventPageTransitionWrapper");
+  return ctx;
+}
+
+interface WrapperProps {
+  children: ReactNode;
+  entryDirection?: "left" | "right";
+  exitDirection?: "left" | "right";
+  durationMs?: number;
+}
+
+// Wrapper for components to create a slide animation to one side or the other.
+export default function EventPageTransitionWrapper({
+  children,
+  entryDirection = "left",
+  exitDirection = "right",
+  durationMs = 500
+}: WrapperProps) {
+  const [enter, setEnter] = useState(true);
+  const [exiting, setExiting] = useState(false);
+
+  useEffect(() => {
+    // allow initial render before triggering transition
+    const id = requestAnimationFrame(() => setEnter(false));
+    return () => cancelAnimationFrame(id);
+  }, []);
+
+  const triggerExit: ExitFn = (after) => {
+    if (exiting) return;
+    setExiting(true);
+    setTimeout(() => after && after(), durationMs);
+  };
+
+  const entryClass = entryDirection === "right" ? "translate-x-[100vw]" : "-translate-x-[100vw]";
+  const exitClass = exitDirection === "right" ? "translate-x-[100vw]" : "-translate-x-[100vw]";
+
+  return (
+    <ExitContext.Provider value={triggerExit}>
+      <div
+        className={`transform transition-transform ease duration-[${durationMs}ms] ${
+          enter ? entryClass : exiting ? exitClass : "translate-x-0"
+        } ${exiting ? "pointer-events-none" : ""}`}
+      >
+        {children}
+      </div>
+    </ExitContext.Provider>
+  );
+}