@dr.pogodin/react-utils
Version:
Collection of generic ReactJS components and utils
38 lines • 1.63 kB
JavaScript
import themed from '@dr.pogodin/react-themes';
import baseTheme from "./base-theme.scss";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Simple and themeable page layout. It keeps the main content centered in
* a column of limited width, which fills entire viewport on small screens
* (under `$screen-md = 1024px` size). At larger screens the column keeps
* `$screen-md` size, and it is centered at the page, surrounded by side
* panels, where additional content can be displayed.
*
* **Children:** Component children are rendered as the content of main panel.
* @param {object} [props] Component properties.
* @param {Node} [props.leftSidePanelContent] The content for left side panel.
* @param {Node} [props.rightSidePanelContent] The content for right side panel.
* @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.
* @param {...any} [props....]
* [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
*/
const PageLayout = ({
children,
leftSidePanelContent,
rightSidePanelContent,
theme
}) => /*#__PURE__*/_jsxs("div", {
className: theme.container,
children: [/*#__PURE__*/_jsx("div", {
className: [theme.sidePanel, theme.leftSidePanel].join(' '),
children: leftSidePanelContent
}), /*#__PURE__*/_jsx("div", {
className: theme.mainPanel,
children: children
}), /*#__PURE__*/_jsx("div", {
className: [theme.sidePanel, theme.rightSidePanel].join(' '),
children: rightSidePanelContent
})]
});
export default themed(PageLayout, 'PageLayout', baseTheme);
//# sourceMappingURL=index.js.map