diff --git a/src/App.jsx b/src/App.jsx index 86f7f4a..bc5d765 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,19 +1,58 @@ +import { useState, useEffect, useRef } from 'react'; +import { useAtomValue } from 'jotai'; +import { activeSectionState, themeState } from './state/atoms'; import Navbar from './components/Navbar/Navbar'; import Hero from './components/Hero/Hero'; import About from './components/About/About'; import Projects from './components/Projects/Projects'; import Contact from './components/Contact/Contact'; import Footer from './components/Footer/Footer'; +import styles from './App.module.scss'; + +const SECTIONS = { + home: Hero, + about: About, + projects: Projects, + contact: Contact, +}; + +const EXIT_DURATION = 200; export default function App() { + const activeSection = useAtomValue(activeSectionState); + const theme = useAtomValue(themeState); + const [displayedSection, setDisplayedSection] = useState(activeSection); + const [isExiting, setIsExiting] = useState(false); + const timerRef = useRef(null); + + useEffect(() => { + if (theme === 'light') { + document.documentElement.dataset.theme = 'light'; + } else { + delete document.documentElement.dataset.theme; + } + }, [theme]); + + useEffect(() => { + if (activeSection === displayedSection) return; + setIsExiting(true); + timerRef.current = setTimeout(() => { + setDisplayedSection(activeSection); + setIsExiting(false); + }, EXIT_DURATION); + return () => clearTimeout(timerRef.current); + }, [activeSection]); + + const Section = SECTIONS[displayedSection] ?? Hero; + return ( <> -
- - - - +
+