@theguild/components
Version:
54 lines (51 loc) • 1.89 kB
text/typescript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { DetailedHTMLProps, HtmlHTMLAttributes, ReactNode, ReactElement } from 'react';
interface HiveLayoutProps extends DetailedHTMLProps<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement> {
children: ReactNode;
head: ReactNode;
navbar: ReactElement;
footer: ReactElement;
fontFamily: string;
lightOnlyPages: string[];
bodyProps?: DetailedHTMLProps<HtmlHTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
docsRepositoryBase: string;
}
/**
* Alternative to `GuildLayout` for Hive-branded websites.
*
* Accepts navbar and footer as slots/children props, because they're highly customizable,
* and their defaults belong to HiveNavigation and HiveFooter component default props.
*
* ## Configuration
*
* Pages can differ by widths and supported color schemes:
*
* - The footer in docs has 90rem width, in landing pages it has 75rem.
* - The navbar in docs has 90rem width, in landing pages it has 1392px.
* - Landing pages only support light mode for _business and prioritization reasons_.
*
* TODO: Consider unifying this in design phase.
*
* For now, a page or a layout can configue these as follows:
*
* ### Light-only pages
*
* @example
* ```tsx
* <HiveLayout bodyProps={{ lightOnlyPages: ['/', '/friends'] }} />
* ```
*
* This will force light theme to the pages with paths `/` and `/friends`,
* by adding `.light` class to the <body /> element.
*
* ### Landing page widths
*
* @example
* ```tsx
* import { HiveLayoutConfig } from '@theguild/components'
*
* <HiveLayoutConfig widths="landing-narrow" />
* ```
*/
declare const HiveLayout: ({ children, head, navbar, footer, className, fontFamily, lightOnlyPages, bodyProps, docsRepositoryBase, ...rest }: HiveLayoutProps) => Promise<react_jsx_runtime.JSX.Element>;
export { HiveLayout, type HiveLayoutProps };