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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { GridStyled as Grid, GridItemStyled as GridItem } from '../../components/grid/grid.styled';
// templates
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { LayoutContainer } from './layout.styled';
import { LayoutRoleType } from './types/layout';
export 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 (_jsxs(LayoutContainer, { "$paddingBottom": styles.padding_botom_size, backgroundColor: backgroundColor, "data-testid": dataTestId, children: [headerContent && (_jsx(Grid, { addPaddingForLayout: true, config: gridConfiguration, "data-testid": `${dataTestId}-header`, styles: gridConfiguration?.[device]?.headerStyles, children: _jsx(GridItem, { as: LayoutRoleType.header, desktop: header?.[DeviceBreakpointsType.DESKTOP], mobile: header?.[DeviceBreakpointsType.MOBILE], tablet: header?.[DeviceBreakpointsType.TABLET], children: headerContent }) })), _jsxs(Grid, { addPaddingForLayout: true, config: gridConfiguration, "data-testid": `${dataTestId}-main`, styles: gridConfiguration?.[device]?.mainStyles, children: [_jsx(GridItem, { as: LayoutRoleType.main, desktop: asideContent ? main?.[DeviceBreakpointsType.DESKTOP] : main?.DESKTOP_FULL, mobile: main?.[DeviceBreakpointsType.MOBILE], tablet: main?.[DeviceBreakpointsType.TABLET], children: mainContent }), asideContent && (_jsx(GridItem, { as: LayoutRoleType.aside, "data-testid": `${dataTestId}-aside`, desktop: aside?.[DeviceBreakpointsType.DESKTOP], mobile: aside?.[DeviceBreakpointsType.MOBILE], tablet: aside?.[DeviceBreakpointsType.TABLET], children: asideContent }))] }), footerContent && footer && (_jsx(Grid, { addPaddingForLayout: true, config: gridConfiguration, "data-testid": `${dataTestId}-footer`, styles: gridConfiguration?.[device]?.footerStyles, children: _jsx(GridItem, { as: LayoutRoleType.footer, desktop: footer[DeviceBreakpointsType.DESKTOP], mobile: footer[DeviceBreakpointsType.MOBILE], tablet: footer[DeviceBreakpointsType.TABLET], children: footerContent }) }))] }));
};
//# sourceMappingURL=layoutStandAlone.js.map