@dr.pogodin/react-utils
Version:
Collection of generic ReactJS components and utils
45 lines • 2.27 kB
JavaScript
import themed from '@dr.pogodin/react-themes';
const baseTheme = {
"context": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___context___zv9tdn",
"ad": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___ad___yr8hbI",
"hoc": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___hoc___01Mz0J",
"container": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___container___blPmpk",
"mainPanel": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___mainPanel___zPoY0u",
"sidePanel": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___sidePanel___mRD159"
};
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