52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { useState } from 'react'
|
|
import { BrowserRouter as Router } from 'react-router-dom'
|
|
import { Routes, Route } from 'react-router-dom'
|
|
import './App.css'
|
|
import Home from './pages/Home'
|
|
import Navbar from './components/Navbar'
|
|
import Sidebar from './components/Sidebar'
|
|
import Footer from './components/Footer'
|
|
import Experience from './pages/Experience'
|
|
import Projects from './pages/Projects'
|
|
import Interests from './pages/Interests'
|
|
|
|
function App() {
|
|
const [darkMode, setDarkMode] = useState(() => {
|
|
const savedMode = localStorage.getItem('DARK_MODE')
|
|
return savedMode ? JSON.parse(savedMode) : true
|
|
})
|
|
const toggleDarkMode = (): void => {
|
|
setDarkMode(!darkMode)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={darkMode ? 'dark' : ''}>
|
|
<main className="bg-amber-50 px-10 dark:bg-gray-900">
|
|
<section className="min-h-screen">
|
|
<Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
|
|
<div className="md:flex md:flex-row md:h-full">
|
|
<div className="mb-4 md:w-1/4 md:max-w-[260px] md:max-h-[900px] border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
|
|
<Sidebar />
|
|
</div>
|
|
<div className="md:flex-1">
|
|
<Router>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/experience" element={<Experience />} />
|
|
<Route path="/projects" element={<Projects />} />
|
|
<Route path="/Interests" element={<Interests />} />
|
|
</Routes>
|
|
</Router>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default App
|