website poc

apps/website/components/shared/ModeGuard.tsx

@@ -0,0 +1,78 @@
+'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';
+}