Implement Advanced Mobile Responsive Components

Author: gabito1451

src/components/mobile/AdaptiveLayouts.tsx

@@ -0,0 +1,54 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { isMobileDevice } from '../../utils/mobileUtils';
+
+interface AdaptiveLayoutProps {
+  mobileView: ReactNode;
+  desktopView: ReactNode;
+  breakpoint?: number;
+}
+
+export const AdaptiveLayout: React.FC<AdaptiveLayoutProps> = ({ 
+  mobileView, 
+  desktopView, 
+  breakpoint = 768 
+}) => {
+  const [isMobile, setIsMobile] = useState<boolean>(true); // Default to mobile for mobile-first approach
+
+  useEffect(() => {
+    const checkIsMobile = () => {
+      // Use both utility and explicit window width for precise responsive switching
+      const mobileByWidth = window.innerWidth <= breakpoint;
+      setIsMobile(mobileByWidth || isMobileDevice());
+    };
+
+    checkIsMobile(); // Initial check
+    
+    // Performance optimization: debounce resize handler
+    let timeoutId: ReturnType<typeof setTimeout>;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(checkIsMobile, 150);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timeoutId);
+    };
+  }, [breakpoint]);
+
+  return <>{isMobile ? mobileView : desktopView}</>;
+};
+
+// Also export a container that changes layout direction, padding, etc., based on sizing
+export const AdaptiveContainer: React.FC<{children: React.ReactNode; className?: string}> = ({
+  children,
+  className = ''
+}) => {
+  // Mobile-first container: stacked by default, becomes flex-row on md screens
+  return (
+    <div className={`flex flex-col md:flex-row w-full p-4 md:p-8 gap-4 md:gap-8 ${className}`}>
+      {children}
+    </div>
+  );
+};

src/components/mobile/GestureHandler.tsx

@@ -0,0 +1,31 @@
+import React, { HTMLAttributes } from 'react';
+import { useMobileGestures } from '../../hooks/useMobileGestures';
+
+interface GestureHandlerProps extends HTMLAttributes<HTMLDivElement> {
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+  onPinchIn?: () => void;
+  onPinchOut?: () => void;
+  onTap?: () => void;
+  swipeThreshold?: number;
+  children: React.ReactNode;
+}
+
+export const GestureHandler: React.FC<GestureHandlerProps> = ({
+  onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown,
+  onPinchIn, onPinchOut, onTap, swipeThreshold,
+  children, ...props
+}) => {
+  const gestureProps = useMobileGestures({
+    onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown,
+    onPinchIn, onPinchOut, onTap, swipeThreshold
+  });
+
+  return (
+    <div {...gestureProps} {...props} style={{ touchAction: 'pan-y', ...props.style }}>
+      {children}
+    </div>
+  );
+};

src/components/mobile/MobileNavigation.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Home, Search, BookOpen, User } from 'lucide-react';
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  onClick?: () => void;
+}
+
+export const MobileNavigation: React.FC<{
+  initialActive?: string;
+  onNavChange?: (id: string) => void;
+}> = ({ initialActive = 'home', onNavChange }) => {
+  const [activeTab, setActiveTab] = useState(initialActive);
+
+  const navItems: NavItem[] = [
+    { id: 'home', label: 'Home', icon: <Home size={24} /> },
+    { id: 'search', label: 'Search', icon: <Search size={24} /> },
+    { id: 'courses', label: 'Courses', icon: <BookOpen size={24} /> },
+    { id: 'profile', label: 'Profile', icon: <User size={24} /> },
+  ];
+
+  const handleTabClick = (id: string) => {
+    setActiveTab(id);
+    if (onNavChange) onNavChange(id);
+  };
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 z-50 md:hidden" style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
+      <ul className="flex justify-around items-center h-16 px-2">
+        {navItems.map((item) => {
+          const isActive = activeTab === item.id;
+          return (
+            <li key={item.id} className="flex-1">
+              <button
+                onClick={() => handleTabClick(item.id)}
+                className={`w-full flex flex-col items-center justify-center py-2 space-y-1 transition-colors duration-200
+                  ${isActive ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'}
+                `}
+                aria-label={item.label}
+              >
+                <div className={`${isActive ? 'scale-110' : 'scale-100'} transition-transform duration-200`}>
+                  {item.icon}
+                </div>
+                <span className="text-[10px] font-medium leading-none">{item.label}</span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};

src/components/mobile/MobileOptimizedComponents.tsx

@@ -0,0 +1,121 @@
+import React, { ButtonHTMLAttributes, ReactNode, useState } from 'react';
+import { GestureHandler } from './GestureHandler';
+
+// Touch-Optimized Button with larger hit area and tap feedback
+interface TouchButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  fullWidth?: boolean;
+}
+
+export const TouchButton: React.FC<TouchButtonProps> = ({ 
+  children, 
+  variant = 'primary', 
+  fullWidth = true,
+  className = '',
+  ...props 
+}) => {
+  const [isTouched, setIsTouched] = useState(false);
+  
+  const baseClasses = "relative overflow-hidden rounded-xl font-medium transition-all duration-200 active:scale-95 flex items-center justify-center";
+  const sizeClasses = "min-h-[48px] px-6 py-3 text-base"; // Minimum 48px height for touch targets
+  const widthClasses = fullWidth ? "w-full" : "";
+  
+  const variantClasses = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800",
+    secondary: "bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-600",
+    outline: "border-2 border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 bg-transparent active:bg-blue-50 dark:active:bg-gray-800",
+    ghost: "bg-transparent text-gray-700 dark:text-gray-300 active:bg-gray-100 dark:active:bg-gray-800"
+  };
+
+  return (
+    <button
+      className={`${baseClasses} ${sizeClasses} ${widthClasses} ${variantClasses[variant]} ${isTouched ? 'opacity-80' : 'opacity-100'} ${className}`}
+      onTouchStart={() => setIsTouched(true)}
+      onTouchEnd={() => setIsTouched(false)}
+      onTouchCancel={() => setIsTouched(false)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+// Swipeable Card Component
+interface SwipeableCardProps {
+  children: ReactNode;
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+  className?: string;
+}
+
+export const SwipeableCard: React.FC<SwipeableCardProps> = ({
+  children,
+  onSwipeLeft,
+  onSwipeRight,
+  onSwipeUp,
+  onSwipeDown,
+  className = ''
+}) => {
+  return (
+    <GestureHandler
+      onSwipeLeft={onSwipeLeft}
+      onSwipeRight={onSwipeRight}
+      onSwipeUp={onSwipeUp}
+      onSwipeDown={onSwipeDown}
+      className={`bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm border border-gray-100 dark:border-gray-700 transition-transform active:scale-[0.98] ${className}`}
+    >
+      {children}
+    </GestureHandler>
+  );
+};
+
+// Bottom Sheet Modal (Mobile Optimized)
+interface BottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  title?: string;
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+  isOpen,
+  onClose,
+  children,
+  title
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col justify-end">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
+        onClick={onClose}
+      />
+      
+      {/* Sheet Content */}
+      <div className="relative bg-white dark:bg-gray-900 w-full rounded-t-3xl p-6 shadow-xl animate-in slide-in-from-bottom-full duration-300 pb-safe">
+        <GestureHandler 
+          onSwipeDown={onClose}
+          swipeThreshold={40}
+        >
+          {/* Handle bar for swiping */}
+          <div className="w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-6 cursor-pointer" />
+        </GestureHandler>
+        
+        {title && (
+          <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
+            {title}
+          </h2>
+        )}
+        
+        <div className="max-h-[70vh] overflow-y-auto">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

src/hooks/useMobileGestures.tsx

@@ -0,0 +1,78 @@
+import { useState, TouchEvent, useCallback } from 'react';
+import { calculateSwipeDirection, calculateDistance } from '../utils/mobileUtils';
+
+interface GestureHandlers {
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+  onPinchIn?: () => void;
+  onPinchOut?: () => void;
+  onTap?: () => void;
+  swipeThreshold?: number;
+}
+
+export const useMobileGestures = (handlers: GestureHandlers) => {
+  const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(null);
+  const [initialPinchDistance, setInitialPinchDistance] = useState<number | null>(null);
+
+  const handleTouchStart = useCallback((e: TouchEvent) => {
+    if (e.touches.length === 1) {
+      setTouchStart({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+    } else if (e.touches.length === 2) {
+      const dist = calculateDistance(
+        e.touches[0].clientX, e.touches[0].clientY,
+        e.touches[1].clientX, e.touches[1].clientY
+      );
+      setInitialPinchDistance(dist);
+    }
+  }, []);
+
+  const handleTouchEnd = useCallback((e: TouchEvent) => {
+    if (e.changedTouches.length === 1 && touchStart) {
+      const touchEnd = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };
+      const isTap = Math.abs(touchEnd.x - touchStart.x) < 10 && Math.abs(touchEnd.y - touchStart.y) < 10;
+
+      if (isTap && handlers.onTap) {
+        handlers.onTap();
+      } else {
+        const direction = calculateSwipeDirection(
+          touchStart.x, touchStart.y,
+          touchEnd.x, touchEnd.y,
+          handlers.swipeThreshold || 50
+        );
+
+        if (direction === 'LEFT' && handlers.onSwipeLeft) handlers.onSwipeLeft();
+        if (direction === 'RIGHT' && handlers.onSwipeRight) handlers.onSwipeRight();
+        if (direction === 'UP' && handlers.onSwipeUp) handlers.onSwipeUp();
+        if (direction === 'DOWN' && handlers.onSwipeDown) handlers.onSwipeDown();
+      }
+    }
+    setTouchStart(null);
+    setInitialPinchDistance(null);
+  }, [touchStart, handlers]);
+
+  const handleTouchMove = useCallback((e: TouchEvent) => {
+    if (e.touches.length === 2 && initialPinchDistance !== null) {
+      const currentDistance = calculateDistance(
+        e.touches[0].clientX, e.touches[0].clientY,
+        e.touches[1].clientX, e.touches[1].clientY
+      );
+      
+      const pinchThreshold = 20;
+      if (currentDistance - initialPinchDistance > pinchThreshold && handlers.onPinchOut) {
+        handlers.onPinchOut();
+        setInitialPinchDistance(currentDistance); // Reset to detect continuous pinch
+      } else if (initialPinchDistance - currentDistance > pinchThreshold && handlers.onPinchIn) {
+        handlers.onPinchIn();
+        setInitialPinchDistance(currentDistance);
+      }
+    }
+  }, [initialPinchDistance, handlers]);
+
+  return {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+  };
+};

src/utils/mobileUtils.ts

@@ -0,0 +1,32 @@
+export const isMobileDevice = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768;
+};
+
+export const calculateSwipeDirection = (
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+  threshold = 50
+): 'LEFT' | 'RIGHT' | 'UP' | 'DOWN' | null => {
+  const diffX = endX - startX;
+  const diffY = endY - startY;
+
+  if (Math.abs(diffX) > Math.abs(diffY)) {
+    // Horizontal swipe
+    if (Math.abs(diffX) > threshold) {
+      return diffX > 0 ? 'RIGHT' : 'LEFT';
+    }
+  } else {
+    // Vertical swipe
+    if (Math.abs(diffY) > threshold) {
+      return diffY > 0 ? 'DOWN' : 'UP';
+    }
+  }
+  return null;
+};
+
+export const calculateDistance = (x1: number, y1: number, x2: number, y2: number): number => {
+  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+};