Files
gridpilot.gg/apps/website/components/shared/ModeGuard.tsx
2025-12-02 00:19:49 +01:00

78 lines
1.6 KiB
TypeScript

'use client';
import { ReactNode } from 'react';
/**
* ModeGuard - Conditional rendering component based on application mode
*
* Usage:
* <ModeGuard mode="pre-launch">
* <PreLaunchContent />
* </ModeGuard>
*
* <ModeGuard mode="post-launch">
* <FullPlatformContent />
* </ModeGuard>
*/
export type GuardMode = 'pre-launch' | 'post-launch';
interface ModeGuardProps {
mode: GuardMode;
children: ReactNode;
fallback?: ReactNode;
}
/**
* Client-side mode guard component
* Note: For initial page load, rely on middleware for route protection
* This component is for conditional UI rendering within accessible pages
*/
export function ModeGuard({ mode, children, fallback = null }: ModeGuardProps) {
const currentMode = getClientMode();
if (currentMode === mode) {
return <>{children}</>;
}
return <>{fallback}</>;
}
/**
* Get mode on client side from injected environment variable
* Falls back to 'pre-launch' if not available
*/
function getClientMode(): GuardMode {
if (typeof window === 'undefined') {
return 'pre-launch';
}
const mode = process.env.NEXT_PUBLIC_GRIDPILOT_MODE;
if (mode === 'post-launch') {
return 'post-launch';
}
return 'pre-launch';
}
/**
* Hook to get current mode in client components
*/
export function useAppMode(): GuardMode {
return getClientMode();
}
/**
* Hook to check if in pre-launch mode
*/
export function useIsPreLaunch(): boolean {
return getClientMode() === 'pre-launch';
}
/**
* Hook to check if in post-launch mode
*/
export function useIsPostLaunch(): boolean {
return getClientMode() === 'post-launch';
}