mobile page component

web/package-lock.json

@@ -37,6 +37,7 @@
         "copy-to-clipboard": "^3.3.3",
         "date-fns": "^3.6.0",
         "embla-carousel-react": "^8.2.0",
+        "framer-motion": "^11.5.4",
         "hls.js": "^1.5.14",
         "idb-keyval": "^6.2.1",
         "immer": "^10.1.1",
@@ -4717,6 +4718,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.5.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz",
+      "integrity": "sha512-E+tb3/G6SO69POkdJT+3EpdMuhmtCh9EWuK4I1DnIC23L7tFPrl8vxP+LSovwaw6uUr73rUbpb4FgK011wbRJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

web/package.json

@@ -43,6 +43,7 @@
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.2.0",
+    "framer-motion": "^11.5.4",
     "hls.js": "^1.5.14",
     "idb-keyval": "^6.2.1",
     "immer": "^10.1.1",

web/src/components/mobile/MobilePage.tsx

@@ -0,0 +1,121 @@
+import { cn } from "@/lib/utils";
+import { isPWA } from "@/utils/isPWA";
+import { ReactNode, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+import { IoMdArrowRoundBack } from "react-icons/io";
+import { motion, AnimatePresence } from "framer-motion";
+
+type MobilePageProps = {
+  children: ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function MobilePage({ children, open, onOpenChange }: MobilePageProps) {
+  const [isVisible, setIsVisible] = useState(open);
+
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+    }
+  }, [open]);
+
+  const handleAnimationComplete = () => {
+    if (!open) {
+      setIsVisible(false);
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          className={cn(
+            "fixed inset-0 z-[100] mb-12 bg-background",
+            isPWA && "mb-16",
+            "landscape:mb-14 landscape:md:mb-16",
+          )}
+          initial={{ x: "100%" }}
+          animate={{ x: open ? 0 : "100%" }}
+          exit={{ x: "100%" }}
+          transition={{ type: "spring", damping: 25, stiffness: 200 }}
+          onAnimationComplete={handleAnimationComplete}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+type MobileComponentProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function MobilePageContent({
+  children,
+  className,
+  ...props
+}: MobileComponentProps) {
+  return (
+    <div className={cn("size-full", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function MobilePageDescription({
+  children,
+  className,
+  ...props
+}: MobileComponentProps) {
+  return (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+interface MobilePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClose: () => void;
+}
+
+export function MobilePageHeader({
+  children,
+  className,
+  onClose,
+  ...props
+}: MobilePageHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "sticky top-0 z-50 mb-2 flex items-center justify-center bg-background p-4",
+        className,
+      )}
+      {...props}
+    >
+      <Button
+        className="absolute left-0 rounded-lg"
+        size="sm"
+        onClick={onClose}
+      >
+        <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+      </Button>
+      <div className="flex flex-row text-center">{children}</div>
+    </div>
+  );
+}
+
+export function MobilePageTitle({
+  children,
+  className,
+  ...props
+}: MobileComponentProps) {
+  return (
+    <h2 className={cn("text-lg font-semibold", className)} {...props}>
+      {children}
+    </h2>
+  );
+}