@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
14 lines • 2.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Text } from '../../../components/text/text';
import { DeviceBreakpointsType } from '../../../types/breakpoints/breakpoints';
import { Button } from '../../button/button';
import { ElementOrIcon } from '../../elementOrIcon/elementOrIcon';
import { TextComponentType } from '../../text/types/component';
import { DraggableIcon, ModalCloseButtonStyled, ModalHeaderContentStyled, ModalHeaderStyled, TitleContainerStyled, TitleHiddenContainer, } from '../modal.styled';
export const ModalHeader = (props) => {
const isMobileOrTablet = props.device === DeviceBreakpointsType.MOBILE || props.device === DeviceBreakpointsType.TABLET;
return (_jsxs(ModalHeaderStyled, { "data-modal-header": true, "$styles": props.styles, children: [isMobileOrTablet && !props.blocked && props.dragIcon && (_jsx(DraggableIcon, { "data-modal-draggable-icon": true, "$styles": props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles?.dragIcon, ...props.dragIcon }) })), _jsxs(ModalHeaderContentStyled, { "$styles": props.styles, children: [!props.blocked && props.closeIcon?.icon && (_jsx(ModalCloseButtonStyled, { "$styles": props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles?.closeButtonIcon, ...props.closeIcon }) })), !props.blocked &&
props.closeButton?.content &&
(props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (_jsx(Button, { variant: props.styles.closeButton?.buttonVariant, ...props.closeButton, children: props.closeButton.content })), props.title?.visible === undefined || props.title.visible ? (_jsx(TitleContainerStyled, { "$styles": props.styles, children: _jsx(Text, { component: TextComponentType.H1, customTypography: props.styles.title, id: props.titleIdFinal, ...props.title, children: props.title?.content }) })) : (_jsx(TitleHiddenContainer, { id: props.titleIdFinal, children: props.title?.content }))] })] }));
};
//# sourceMappingURL=modalHeader.js.map