36 lines
968 B
JavaScript
36 lines
968 B
JavaScript
|
import { jsx as _jsx } from "react/jsx-runtime";
|
||
|
|
import { ZINDEX_LAYERS } from "./constants";
|
||
|
|
/**
|
||
|
|
* Hook to get z-index value for a layer name.
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```tsx
|
||
|
|
* const modalZIndex = useZName('modal'); // 2000
|
||
|
|
* const ageGateZIndex = useZName('high-priority'); // 9000
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
export function useZName(layer) {
|
||
|
|
return ZINDEX_LAYERS[layer];
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Component that wraps children in a div with the specified z-index layer.
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```tsx
|
||
|
|
* <ZName name="modal" style={{ background: 'white' }}>
|
||
|
|
* <ModalContent />
|
||
|
|
* </ZName>
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
export const ZName = ({ name, children, style, zIndex: customZIndex, }) => {
|
||
|
|
const zIndex = customZIndex ?? ZINDEX_LAYERS[name];
|
||
|
|
return (_jsx("div", { style: {
|
||
|
|
position: "relative",
|
||
|
|
zIndex,
|
||
|
|
...style,
|
||
|
|
}, children: children }));
|
||
|
|
};
|
||
|
|
// Re-export constants for convenience
|
||
|
|
export { ZINDEX_LAYERS };
|
||
|
|
export default ZName;
|
||
|
|
//# sourceMappingURL=react.js.map
|