85 lines
3.2 KiB
JavaScript
85 lines
3.2 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
|
import { Routes, Route, useLocation } from "react-router";
|
|
import LandingPage from "./pages/LandingPage";
|
|
import ProductDetailPage from "./components/ProductDetailPage";
|
|
import AboutPage from "./pages/AboutPage";
|
|
import ImpressumPage from "./pages/ImpressumPage";
|
|
import DatenschutzPage from "./pages/DatenschutzPage";
|
|
import SupportPage from "./pages/SupportPage";
|
|
import DiscoverySetPage from "./pages/DiscoverySetPage";
|
|
import SmallBatchPage from "./pages/SmallBatchPage";
|
|
import Footer from "./components/Footer";
|
|
import SupportChatbot from "./components/SupportChatbot";
|
|
import ScrollToTop from "./components/ScrollToTop";
|
|
import ShopDrawer from "./components/ShopDrawer";
|
|
import CartToast from "./components/CartToast";
|
|
import { ProductTransitionProvider } from "./components/ProductTransition";
|
|
import useLenisSmoothScroll from "./hooks/useLenisSmoothScroll";
|
|
import useScrollTextReveal from "./hooks/useScrollTextReveal";
|
|
import { ThemeProvider } from "./theme/ThemeContext";
|
|
import "./style/textReveal.css";
|
|
|
|
const THEME_STORAGE_KEY = "atmos-theme";
|
|
|
|
function App() {
|
|
const location = useLocation();
|
|
const routeContentRef = useRef(null);
|
|
const [theme, setTheme] = useState(() => {
|
|
if (typeof window === "undefined") return "dark";
|
|
const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
|
|
return storedTheme === "light" ? "light" : "dark";
|
|
});
|
|
const shouldFlushFooter =
|
|
location.pathname === "/" || location.pathname.startsWith("/duft/");
|
|
const showSupportChatbot = location.pathname === "/";
|
|
|
|
useLenisSmoothScroll(location.pathname);
|
|
useScrollTextReveal(routeContentRef, location.pathname);
|
|
|
|
useEffect(() => {
|
|
if (typeof document === "undefined") return;
|
|
|
|
document.body.classList.remove("theme-dark", "theme-light");
|
|
document.body.classList.add(theme === "light" ? "theme-light" : "theme-dark");
|
|
document.documentElement.style.colorScheme = theme === "light" ? "light" : "dark";
|
|
|
|
if (typeof window !== "undefined") {
|
|
window.localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
}
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((currentTheme) => (currentTheme === "dark" ? "light" : "dark"));
|
|
};
|
|
|
|
const isLight = theme === "light";
|
|
|
|
return (
|
|
<ThemeProvider value={{ theme, isLight, toggleTheme }}>
|
|
<ProductTransitionProvider>
|
|
<ScrollToTop />
|
|
|
|
<div ref={routeContentRef} data-route-content>
|
|
<Routes>
|
|
<Route path="/" element={<LandingPage />} />
|
|
<Route path="/duft/:perfumeSlug" element={<ProductDetailPage />} />
|
|
<Route path="/about" element={<AboutPage />} />
|
|
<Route path="/impressum" element={<ImpressumPage />} />
|
|
<Route path="/datenschutz" element={<DatenschutzPage />} />
|
|
<Route path="/support" element={<SupportPage />} />
|
|
<Route path="/discovery-set" element={<DiscoverySetPage />} />
|
|
<Route path="/small-batch" element={<SmallBatchPage />} />
|
|
</Routes>
|
|
</div>
|
|
|
|
<ShopDrawer />
|
|
<CartToast />
|
|
<Footer flushTop={shouldFlushFooter} />
|
|
{showSupportChatbot && <SupportChatbot />}
|
|
</ProductTransitionProvider>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|