71 lines
1.4 KiB
TypeScript
Executable file
71 lines
1.4 KiB
TypeScript
Executable file
/**
|
|
* React implementation of ZName component and useZName hook.
|
|
*/
|
|
|
|
import React from "react"
|
|
import type { CSSProperties, ReactNode } from "react"
|
|
|
|
import { ZINDEX_LAYERS, type ZIndexLayerName } from "./constants"
|
|
|
|
/**
|
|
* Props for the React ZName component.
|
|
*/
|
|
interface ReactZNameProps {
|
|
/** The z-index layer to apply */
|
|
name: ZIndexLayerName;
|
|
/** Child content to wrap */
|
|
children: ReactNode;
|
|
/** Additional CSS styles */
|
|
style?: CSSProperties;
|
|
/** Override z-index value (use sparingly) */
|
|
zIndex?: number;
|
|
}
|
|
|
|
/**
|
|
* 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: ZIndexLayerName): number {
|
|
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: React.FC<ReactZNameProps> = ({
|
|
name,
|
|
children,
|
|
style,
|
|
zIndex: customZIndex,
|
|
}) => {
|
|
const zIndex = customZIndex ?? ZINDEX_LAYERS[name]
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
zIndex,
|
|
...style,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Re-export constants for convenience
|
|
export { ZINDEX_LAYERS, type ZIndexLayerName }
|
|
|
|
export default ZName
|