ASP
import React, { useState, useEffect } from ‘react’;
import { HashRouter as Router, Routes, Route, Link, useLocation } from ‘react-router-dom’;
import Home from ‘./pages/Home’;
import ArticleView from ‘./pages/ArticleView’;
import About from ‘./pages/About’;
import { BRAND_NAME, Icons } from ‘./constants’;
const ScrollToTop = () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
};
const Header = ({ isDark, toggleTheme }: { isDark: boolean; toggleTheme: () => void }) => (
);
const Footer = () => (
);
const App: React.FC = () => {
const [isDark, setIsDark] = useState(true);
useEffect(() => {
const savedTheme = localStorage.getItem(‘theme’);
if (savedTheme === ‘light’) {
setIsDark(false);
}
}, []);
useEffect(() => {
if (isDark) {
document.documentElement.classList.add(‘dark’);
localStorage.setItem(‘theme’, ‘dark’);
} else {
document.documentElement.classList.remove(‘dark’);
localStorage.setItem(‘theme’, ‘light’);
}
}, [isDark]);
const toggleTheme = () => setIsDark(!isDark);
return (
);
};
export default App;