File size: 3,892 Bytes
25732fb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | import React from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { Toaster } from 'react-hot-toast'
import { AuthProvider } from './context/AuthContext'
import { useAuth } from './hooks/useAuth'
// Layout
import Navbar from './components/Layout/Navbar'
import Sidebar from './components/Layout/Sidebar'
import Footer from './components/Layout/Footer'
// Pages
import Login from './components/Auth/Login'
import Register from './components/Auth/Register'
import Dashboard from './components/Dashboard/Dashboard'
import Learn from './components/Learn/Learn'
import Quiz from './components/Quiz/Quiz'
import Progress from './components/Progress/Progress'
// Protected Route Component
const ProtectedRoute = ({ children }) => {
const { user, loading } = useAuth()
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary-600"></div>
</div>
)
}
return user ? children : <Navigate to="/login" />
}
// Main Layout Component
const MainLayout = ({ children }) => {
const [sidebarOpen, setSidebarOpen] = React.useState(true)
return (
<div className="min-h-screen flex">
<Sidebar isOpen={sidebarOpen} />
<div className="flex-1 flex flex-col">
<Navbar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
<main className="flex-1 overflow-auto">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{children}
</div>
</main>
<Footer />
</div>
</div>
)
}
function App() {
return (
<AuthProvider>
<Router>
<Toaster
position="top-right"
toastOptions={{
duration: 3000,
style: {
background: '#fff',
color: '#1e293b',
padding: '16px',
borderRadius: '12px',
boxShadow: '0 10px 25px rgba(0,0,0,0.1)',
},
success: {
iconTheme: {
primary: '#0ea5e9',
secondary: '#fff',
},
},
}}
/>
<Routes>
{/* Public Routes */}
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
{/* Protected Routes */}
<Route path="/" element={
<ProtectedRoute>
<MainLayout>
<Dashboard />
</MainLayout>
</ProtectedRoute>
} />
<Route path="/learn" element={
<ProtectedRoute>
<MainLayout>
<Learn />
</MainLayout>
</ProtectedRoute>
} />
<Route path="/learn/:topicId" element={
<ProtectedRoute>
<MainLayout>
<Learn />
</MainLayout>
</ProtectedRoute>
} />
<Route path="/quiz" element={
<ProtectedRoute>
<MainLayout>
<Quiz />
</MainLayout>
</ProtectedRoute>
} />
<Route path="/quiz/:topicId" element={
<ProtectedRoute>
<MainLayout>
<Quiz />
</MainLayout>
</ProtectedRoute>
} />
<Route path="/progress" element={
<ProtectedRoute>
<MainLayout>
<Progress />
</MainLayout>
</ProtectedRoute>
} />
{/* Redirect unknown routes */}
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</Router>
</AuthProvider>
)
}
export default App |