Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 57x 57x 6x | import type { ReactNode } from "react";
import { ArrowLeft } from "lucide-react";
import { useIsMobile } from "../../hooks/useIsMobile";
type MobileFullPageProps = {
children: ReactNode;
/** Title shown in the mobile header bar. If omitted, no header is rendered (for pages that manage their own header). */
title?: string;
/** Back navigation handler */
onBack?: () => void;
/** Optional right-side actions in the header */
headerActions?: ReactNode;
};
/**
* On mobile: renders a full-screen overlay (z-[60]) that covers the
* DashboardLayout chrome (header + bottom nav). Matches the DrawerDialog
* MobileFullScreen pattern.
*
* On desktop: passes children through unchanged (no wrapper).
*/
export function MobileFullPage({
children,
title,
onBack,
headerActions,
}: MobileFullPageProps) {
const isMobile = useIsMobile();
if (!isMobile) return <>{children}</>;
return (
<div className="fixed inset-0 z-[60] flex flex-col bg-background-base">
{title && (
<div className="flex h-14 items-center gap-3 border-b border-border-default bg-background-elevated px-4 flex-shrink-0">
{onBack && (
<button
type="button"
onClick={onBack}
className="p-2 -ml-2 text-foreground-muted hover:text-foreground-default rounded-md"
aria-label="Go back"
>
<ArrowLeft className="h-5 w-5" />
</button>
)}
<h2 className="text-lg font-semibold text-foreground-default truncate">
{title}
</h2>
{headerActions && (
<div className="flex items-center gap-2 ml-auto">
{headerActions}
</div>
)}
</div>
)}
<div className="flex-1 overflow-y-auto">
{children}
</div>
</div>
);
}
|