@kubit-ui-web/react-components/dist/esm/components/headerStructure/headerStructureStandAlone.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 React from 'react';
import { BreadcrumbsControlled as Breadcrumbs } from '../../components/breadcrumbs/breadcrumbsControlled';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { HeaderContent } from './components/headerContent';
import { BreadcrumbsWrapper, HeaderContainerContentStyled, HeaderContainerStyled, } from './headerStructure.styled';
import { HeaderStructureContentPositionType } from './types/position';
const HeaderStructureStandAloneComponent = ({ dataTestId = 'header-structure', ...props }, ref) => {
    const getPositionContent = (position) => {
        return React.Children.toArray(props.children).filter((child) => {
            return child?.props?.['data-position'] === position;
        });
    };
    const leftContent = getPositionContent(HeaderStructureContentPositionType.LEFT);
    const rightContent = getPositionContent(HeaderStructureContentPositionType.RIGHT);
    const centerContent = getPositionContent(HeaderStructureContentPositionType.CENTER);
    return (_jsxs(HeaderContainerStyled, { ref: ref, backgroundColor: props.backgroundColor, containerHeight: props.containerHeight, "data-testid": dataTestId, scrolling: props.scrolling, styles: props.styles, children: [props.crumbs && props.device === DeviceBreakpointsType.DESKTOP && (_jsx(BreadcrumbsWrapper, { styles: props.styles, children: _jsx(Breadcrumbs, { crumbs: props.crumbs, variant: props.configBreadcrumbs?.variant, ...props.configBreadcrumbs }) })), _jsxs(HeaderContainerContentStyled, { styles: props.styles, children: [_jsx(HeaderContent, { styles: props.styles.leftContent, children: leftContent }), _jsx(HeaderContent, { styles: props.styles.centerContent, children: centerContent }), _jsx(HeaderContent, { styles: props.styles.rightContent, children: rightContent })] })] }));
};
export const HeaderStandAlone = React.forwardRef(HeaderStructureStandAloneComponent);
//# sourceMappingURL=headerStructureStandAlone.js.map