Page

1import { type HTMLAttributes } from "react";
2import { getClassName } from "@behivetech/get-class-name";
3import styles from "./page.module.scss";
4
5export interface PageProps extends HTMLAttributes<HTMLDivElement> {
6  /** Document title rendered into a `<title>` tag */
7  title?: string;
8  /** Meta description rendered into a `<meta name="description">` tag */
9  description?: string;
10  /** Additional class names to merge with the component root element */
11  className?: string;
12  /** Page content */
13  children?: React.ReactNode;
14}
15
16export const Page = ({
17  title,
18  description,
19  className,
20  children,
21  ...rest
22}: PageProps) => {
23  const [rootClass] = getClassName({
24    className,
25    rootClass: "BHT__Page",
26    styles,
27  });
28
29  return (
30    <>
31      {title && <title>{title}</title>}
32      {description && <meta name="description" content={description} />}
33      <div {...rest} className={rootClass}>
34        {children}
35      </div>
36    </>
37  );
38};

1.BHT__Page {
2  // 100vh is the tallest the viewport gets on iOS Safari (toolbars retracted), so it
3  // runs past the visible area; dvh follows the toolbars where it is supported.
4  min-height: 100vh;
5  min-height: 100dvh;
6  width: 100%;
7}

1export { Page } from "./page.js";
2export type { PageProps } from "./page.js";

1import { Page } from "./page.js";
2
3export const BasicPage = () => (
4  <Page
5    title="Example Page"
6    description="An example page using the Page template"
7  >
8    <h1>Welcome</h1>
9    <p>This page has no extra margin, padding, or border around it.</p>
10  </Page>
11);