admin
34c8e2db4e
- Added PageScaffold component for shared page layout with safe-area padding and scroll management. - Introduced ResponsiveMobileShell for mobile canvas layout with customizable backgrounds. - Created ScrollablePage component for scrollable content areas. - Updated CSS styles for coins rules screen, sidebar components, and subscription sections to use responsive design tokens. - Added viewport CSS variables provider to synchronize CSS variables with the visual viewport. - Refactored breakpoints and dimensions for better responsiveness across devices.
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import styles from "./page-scaffold.module.css";
|
|
|
|
export interface PageScaffoldProps {
|
|
children: ReactNode;
|
|
header?: ReactNode;
|
|
footer?: ReactNode;
|
|
className?: string;
|
|
bodyClassName?: string;
|
|
padded?: boolean;
|
|
scrollable?: boolean;
|
|
bodyScrollable?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Shared page layout primitive for mobile-first screens.
|
|
*
|
|
* Use it when migrating feature pages away from hand-written shell/padding
|
|
* styles. It keeps safe-area padding and scroll ownership in one place.
|
|
*/
|
|
export function PageScaffold({
|
|
children,
|
|
header,
|
|
footer,
|
|
className,
|
|
bodyClassName,
|
|
padded = true,
|
|
scrollable = false,
|
|
bodyScrollable = false,
|
|
}: PageScaffoldProps) {
|
|
return (
|
|
<main
|
|
className={[styles.root, padded ? styles.padded : "", className]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
data-scrollable={scrollable}
|
|
>
|
|
{header ? <div className={styles.header}>{header}</div> : null}
|
|
<div
|
|
className={[styles.body, bodyClassName].filter(Boolean).join(" ")}
|
|
data-scrollable={bodyScrollable}
|
|
>
|
|
{children}
|
|
</div>
|
|
{footer ? <div className={styles.footer}>{footer}</div> : null}
|
|
</main>
|
|
);
|
|
}
|