@payfit/unity-components
Version:
56 lines (55 loc) • 2.14 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
export declare const page: import('tailwind-variants').TVReturnType<{
variant: {
default: string[];
legacy__midnight: string[];
};
}, undefined, string[], {
variant: {
default: string[];
legacy__midnight: string[];
};
}, undefined, import('tailwind-variants').TVReturnType<{
variant: {
default: string[];
legacy__midnight: string[];
};
}, undefined, string[], unknown, unknown, undefined>>;
export interface PageProps extends PropsWithChildren {
/**
* The variant of the page.
* @default 'default'
* @remarks
* - `default` - The default variant is a standard page with a left-aligned header and a right-aligned footer.
* - `legacy__midnight` - The legacy__midnight variant is a page with a left-aligned header and a right-aligned footer.
*/
variant: VariantProps<typeof page>['variant'];
}
/**
* The Page component provides a consistent layout container for page content with predefined spacing and styling.
*
* Use this component as the main container for your content to ensure a consistent look and feel across the application.
* It works seamlessly with PageHeader for structured page layouts and adapts to different screen sizes.
* @param {PageProps} props - Standard props from HTMLDivElement with additional variant option
* @see {@link PageProps} for all available props
* @example
* ```tsx
* import { Page, PageHeader, PageHeading } from '@payfit/unity-components'
*
* function MyPage() {
* return (
* <Page variant="default">
* <PageHeader>
* <PageHeading variant="title">My Page</PageHeading>
* </PageHeader>
* <div>Content goes here</div>
* </Page>
* )
* }
* ```
* @remarks
* [API](https://unity-components.payfit.io/?path=/docs/layout-page--docs) • [Design docs](https://www.payfit.design/24f360409/p/99b0ae-app-body)
*/
declare const Page: import('react').ForwardRefExoticComponent<PageProps & import('react').RefAttributes<HTMLDivElement>>;
export { Page };