@kubit-ui-web/react-components/dist/cjs/components/layout/layoutStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayoutStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const grid_styled_1 = require("../../components/grid/grid.styled");
// templates
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const layout_styled_1 = require("./layout.styled");
const layout_1 = require("./types/layout");
const LayoutStandAlone = ({ headerContent, mainContent, asideContent, styles, backgroundColor, columnsConfig, gridConfig, footerContent, dataTestId = 'layout', device, }) => {
    const columnsConfiguration = columnsConfig ?? styles.defaultColumnsConfig;
    const gridConfiguration = gridConfig ?? styles.gridConfig;
    const { header, main, aside, footer } = columnsConfiguration ?? {};
    return ((0, jsx_runtime_1.jsxs)(layout_styled_1.LayoutContainer, { "$paddingBottom": styles.padding_botom_size, backgroundColor: backgroundColor, "data-testid": dataTestId, children: [headerContent && ((0, jsx_runtime_1.jsx)(grid_styled_1.GridStyled, { addPaddingForLayout: true, config: gridConfiguration, "data-testid": `${dataTestId}-header`, styles: gridConfiguration?.[device]?.headerStyles, children: (0, jsx_runtime_1.jsx)(grid_styled_1.GridItemStyled, { as: layout_1.LayoutRoleType.header, desktop: header?.[breakpoints_1.DeviceBreakpointsType.DESKTOP], mobile: header?.[breakpoints_1.DeviceBreakpointsType.MOBILE], tablet: header?.[breakpoints_1.DeviceBreakpointsType.TABLET], children: headerContent }) })), (0, jsx_runtime_1.jsxs)(grid_styled_1.GridStyled, { addPaddingForLayout: true, config: gridConfiguration, "data-testid": `${dataTestId}-main`, styles: gridConfiguration?.[device]?.mainStyles, children: [(0, jsx_runtime_1.jsx)(grid_styled_1.GridItemStyled, { as: layout_1.LayoutRoleType.main, desktop: asideContent ? main?.[breakpoints_1.DeviceBreakpointsType.DESKTOP] : main?.DESKTOP_FULL, mobile: main?.[breakpoints_1.DeviceBreakpointsType.MOBILE], tablet: main?.[breakpoints_1.DeviceBreakpointsType.TABLET], children: mainContent }), asideContent && ((0, jsx_runtime_1.jsx)(grid_styled_1.GridItemStyled, { as: layout_1.LayoutRoleType.aside, "data-testid": `${dataTestId}-aside`, desktop: aside?.[breakpoints_1.DeviceBreakpointsType.DESKTOP], mobile: aside?.[breakpoints_1.DeviceBreakpointsType.MOBILE], tablet: aside?.[breakpoints_1.DeviceBreakpointsType.TABLET], children: asideContent }))] }), footerContent && footer && ((0, jsx_runtime_1.jsx)(grid_styled_1.GridStyled, { addPaddingForLayout: true, config: gridConfiguration, "data-testid": `${dataTestId}-footer`, styles: gridConfiguration?.[device]?.footerStyles, children: (0, jsx_runtime_1.jsx)(grid_styled_1.GridItemStyled, { as: layout_1.LayoutRoleType.footer, desktop: footer[breakpoints_1.DeviceBreakpointsType.DESKTOP], mobile: footer[breakpoints_1.DeviceBreakpointsType.MOBILE], tablet: footer[breakpoints_1.DeviceBreakpointsType.TABLET], children: footerContent }) }))] }));
};
exports.LayoutStandAlone = LayoutStandAlone;
//# sourceMappingURL=layoutStandAlone.js.map