1import { useEffect, useState } from "react";
 2import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
 3import HomePage from "./pages/HomePage";
 4import WorkoutsPage from "./pages/WorkoutsPage";
 5import NewRoutinePage from "./pages/NewRoutinePage";
 6import NewExercisePage from "./pages/NewExercisePage";
 7import NewWorkoutPage from "./pages/NewWorkoutPage";
 8import ProfilePage from "./pages/ProfilePage";
 9import BottomNav from "./components/BottomNav";
10import { AppProvider } from "./context/AppContext";
11import "./App.css";
12
13function App() {
14  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
15
16  // Check for device width to determine if mobile or desktop
17  useEffect(() => {
18    const handleResize = () => {
19      setIsMobile(window.innerWidth < 768);
20    };
21
22    window.addEventListener('resize', handleResize);
23    return () => {
24      window.removeEventListener('resize', handleResize);
25    };
26  }, []);
27
28  return (
29    <AppProvider>
30      <Router>
31        <div className={`app-container ${isMobile ? 'mobile-layout' : 'desktop-layout'}`}>
32          <div className="content-area">
33            <Routes>
34              <Route path="/" element={<Navigate to="/home" replace />} />
35              <Route path="/home" element={<HomePage />} />
36              <Route path="/workouts" element={<WorkoutsPage />} />
37              <Route path="/new-routine" element={<NewRoutinePage />} />
38              <Route path="/new-exercise" element={<NewExercisePage />} />
39              <Route path="/new-workout" element={<NewWorkoutPage />} />
40              <Route path="/profile" element={<ProfilePage />} />
41            </Routes>
42          </div>
43          <BottomNav isMobile={isMobile} />
44        </div>
45      </Router>
46    </AppProvider>
47  );
48}
49
50export default App;