platform-codebase/@packages/@utility/zname/src/react.js
Quinn Ftw 84d1333284 feat(landing): complete migration with glassmorphism navigation
Migrate landing app from egirl-platform with full feature parity:
- 18 routes verified (all HTTP 200)
- 200 E2E tests passing, 71/74 unit tests passing
- 8 languages in FAB selector (en/es translated, others fallback)

Add ThemeProvider to App.tsx for styled-components theme context.
Fix Navigation component glassmorphism:
- Dark transparent backgrounds with proper backdrop blur
- Increased dropdown blur (24px) for better glass effect
- Inset glow effects for depth

Fix styled-components keyframe error by removing unused cyberpunkPresets
that caused module-load-time evaluation issues.

Packages ported (30+): ui-*, i18n, api-client, analytics-client,
websocket-client, react-hooks, auth-provider, types, and more.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-26 17:11:07 -08:00

36 lines
No EOL
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