Fallback UI Components for Offline Mode

// Component to display when online
function OnlineComponent() {
  return (
    <div>
      <h1>You are online!</h1>
      {/* Regular app UI elements go here */}
    </div>
  );
}

// Component to display when offline
function OfflineComponent() {
  return (
    <div>
      <h1>You are offline!</h1>
      <p>Please check your connection. Some features may not be available.</p>
      {/* Fallback UI elements for offline mode go here */}
    </div>
  );
}

// Main app component that manages online/offline state
function App() {
  const [isOnline, setIsOnline] = React.useState(window.navigator.onLine);

  React.useEffect(() => {
    function updateOnlineStatus() {
      setIsOnline(window.navigator.onLine);
    }

    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);

    return () => {
      window.removeEventListener('online', updateOnlineStatus);
      window.removeEventListener('offline', updateOnlineStatus);
    };
  }, []);

  return isOnline ? <OnlineComponent /> : <OfflineComponent />;
}