retro-react
Version:
A React component library for building retro-style websites
50 lines (49 loc) • 1.83 kB
TypeScript
/** @jsxImportSource theme-ui */
import React from 'react';
import { ThemeUICSSObject } from 'theme-ui';
interface CommonProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* The content of the section.
*
* @default undefined
*/
children: React.ReactNode;
sx?: ThemeUICSSObject;
}
export interface FlexibleLayoutProps extends CommonProps {
}
export interface HeaderProps extends CommonProps {
}
export interface FooterProps extends CommonProps {
}
export interface SidebarLeftProps extends CommonProps {
}
export interface SidebarRightProps extends CommonProps {
}
export interface MainContentProps extends CommonProps {
}
/**
* FlexibleLayout with header, footer, sidebar, and content. Used for the main layout of the app. Similar to old school HTML tables.
* Uses CSS Grid and media queries to change the layout at different breakpoints. Use `sx` prop to modify the layout.
*
* Includes `LayoutHeader`, `LayoutFooter`, `LayoutSidebarLeft`, `LayoutSidebarRight`, and `LayoutMain`.
* Must be wrapped in `FlexibleLayout`.
* Each of these components can be used individually. The order of the components does not matter.
*
* @example
* <FlexibleLayout>
* <LayoutHeader>
* Header
* </LayoutHeader>
* <LayoutMain>
* Main Content
* </LayoutMain>
* <FlexibleLayout>
**/
export declare const FlexibleLayout: React.ForwardRefExoticComponent<FlexibleLayoutProps & React.RefAttributes<HTMLDivElement>>;
export declare const LayoutHeader: React.FC<HeaderProps>;
export declare const LayoutFooter: React.FC<FooterProps>;
export declare const LayoutSidebarLeft: React.FC<SidebarLeftProps>;
export declare const LayoutSidebarRight: React.FC<SidebarRightProps>;
export declare const LayoutMain: React.FC<MainContentProps>;
export {};