alpha wip

apps/website/components/shared/ModeGuard.tsx

@@ -1,21 +1,21 @@
 'use client';
 
-import { ReactNode } from 'react';
+import { useState, useEffect, ReactNode } from 'react';
 
 /**
  * ModeGuard - Conditional rendering component based on application mode
- * 
+ *
  * Usage:
  * <ModeGuard mode="pre-launch">
  *   <PreLaunchContent />
  * </ModeGuard>
- * 
- * <ModeGuard mode="post-launch">
+ *
+ * <ModeGuard mode="alpha">
  *   <FullPlatformContent />
  * </ModeGuard>
  */
 
-export type GuardMode = 'pre-launch' | 'post-launch';
+export type GuardMode = 'pre-launch' | 'alpha';
 
 interface ModeGuardProps {
   mode: GuardMode;
@@ -29,13 +29,23 @@ interface ModeGuardProps {
  * 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}</>;
+  const [isMounted, setIsMounted] = useState(false);
+  const [currentMode, setCurrentMode] = useState<GuardMode>('pre-launch');
+
+  useEffect(() => {
+    setIsMounted(true);
+    setCurrentMode(getClientMode());
+  }, []);
+
+  if (!isMounted) {
+    return <>{fallback}</>;
   }
-  
-  return <>{fallback}</>;
+
+  if (currentMode !== mode) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
 }
 
 /**
@@ -49,8 +59,8 @@ function getClientMode(): GuardMode {
   
   const mode = process.env.NEXT_PUBLIC_GRIDPILOT_MODE;
   
-  if (mode === 'post-launch') {
-    return 'post-launch';
+  if (mode === 'alpha') {
+    return 'alpha';
   }
   
   return 'pre-launch';
@@ -71,8 +81,8 @@ export function useIsPreLaunch(): boolean {
 }
 
 /**
- * Hook to check if in post-launch mode
+ * Hook to check if in alpha mode
  */
-export function useIsPostLaunch(): boolean {
-  return getClientMode() === 'post-launch';
+export function useIsAlpha(): boolean {
+  return getClientMode() === 'alpha';
 }