4215404598
Package: @lilith/ui-header Split from: lilith/ui.git or lilith/build.git Publish workflow: calls lilith/workflows/.forgejo/workflows/publish-npm.yml@main
28 lines
No EOL
1.6 KiB
JavaScript
28 lines
No EOL
1.6 KiB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
|
|
import { BLUR_VALUES, OPACITY_VALUES, BORDER_VALUES, SHADOW_VALUES, GLOW_VALUES, } from '@lilith/ui-glassmorphism';
|
|
import styled from '@lilith/ui-styled-components';
|
|
const glassHeader = {
|
|
blur: `${BLUR_VALUES.md}px`,
|
|
saturation: '180%',
|
|
bgOpacity: OPACITY_VALUES.solid,
|
|
bgColor: `rgba(10, 10, 15, ${OPACITY_VALUES.solid})`,
|
|
bgColorBlur: `rgba(10, 10, 15, 0.65)`,
|
|
border: `rgba(255, 255, 255, ${BORDER_VALUES.subtle})`,
|
|
shadow: SHADOW_VALUES.sm,
|
|
glow: GLOW_VALUES.subtle,
|
|
};
|
|
const StyledHeaderRoot = styled.header `
|
|
position: ${({ $sticky }) => ($sticky ? 'sticky' : 'relative')};
|
|
top: 0;
|
|
z-index: ${(props) => props.theme.zIndex.sticky};
|
|
height: ${({ $height }) => $height};
|
|
flex-shrink: 0;
|
|
background-color: ${({ $blur }) => ($blur ? glassHeader.bgColorBlur : glassHeader.bgColor)};
|
|
backdrop-filter: ${({ $blur }) => $blur ? `blur(${glassHeader.blur}) saturate(${glassHeader.saturation})` : 'none'};
|
|
-webkit-backdrop-filter: ${({ $blur }) => $blur ? `blur(${glassHeader.blur}) saturate(${glassHeader.saturation})` : 'none'};
|
|
border-bottom: 1px solid ${glassHeader.border};
|
|
transition: all ${(props) => props.theme.transitions.normal};
|
|
box-shadow: ${({ $isScrolled }) => $isScrolled ? `${glassHeader.shadow}, ${glassHeader.glow}` : glassHeader.glow};
|
|
`;
|
|
export const HeaderRoot = ({ children, sticky = true, blur = true, height = 'var(--header-height, 72px)', className, }) => (_jsx(StyledHeaderRoot, { "$sticky": sticky, "$blur": blur, "$height": height, "$isScrolled": false, className: className, children: children }));
|
|
//# sourceMappingURL=HeaderRoot.js.map
|