feat: add routing (#6)

Author: romanindev

package-lock.json

@@ -20,7 +20,8 @@
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -29,11 +30,11 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.3.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.3.2",
     "prettier": "^3.8.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",

package.json

@@ -1,54 +1,18 @@
-import { useEffect, useMemo, useState } from 'react';
-import { CssBaseline, ThemeProvider, Box } from '@mui/material';
-import type { PaletteMode } from '@mui/material';
-import { Header } from './components/Header';
-import { Hero } from './components/Hero';
-import { Features } from './components/Features';
-import { Footer } from './components/Footer';
-import { getTheme } from './theme';
+import { Suspense } from 'react';
+import { useRoutes } from 'react-router-dom';
+import { Box, CircularProgress } from '@mui/material';
+import { routes } from './app/router';
 
-const STORAGE_KEY = 'dfsync-theme-mode';
-
-function getInitialMode(): PaletteMode {
-  const saved = localStorage.getItem(STORAGE_KEY);
-  if (saved === 'light' || saved === 'dark') {
-    return saved;
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
+const Loader = () => {
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
+      <CircularProgress />
+    </Box>
+  );
+};
 
 export default function App() {
-  const [mode, setMode] = useState<PaletteMode>(getInitialMode);
-
-  useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, mode);
-  }, [mode]);
+  const element = useRoutes(routes);
 
-  const theme = useMemo(() => getTheme(mode), [mode]);
-
-  const handleToggleMode = () => {
-    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
-  };
-
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-
-      <Box
-        sx={{
-          minHeight: '100vh',
-          background:
-            mode === 'dark'
-              ? 'radial-gradient(circle at top, rgba(56,189,248,0.12), transparent 30%)'
-              : 'radial-gradient(circle at top, rgba(37,99,235,0.10), transparent 30%)',
-        }}
-      >
-        <Header mode={mode} onToggleMode={handleToggleMode} />
-        <Hero />
-        <Features />
-        <Footer />
-      </Box>
-    </ThemeProvider>
-  );
+  return <Suspense fallback={<Loader />}>{element}</Suspense>;
 }

src/App.tsx

@@ -0,0 +1,42 @@
+import { ThemeProvider, CssBaseline, type PaletteMode } from '@mui/material';
+import { getTheme } from '../theme';
+import { useEffect, useMemo, useState } from 'react';
+import { ThemeModeContext } from './themeContext';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const STORAGE_KEY = 'dfsync-theme-mode';
+
+function getInitialMode(): PaletteMode {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved === 'light' || saved === 'dark') {
+    return saved;
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export const AppProviders = ({ children }: Props) => {
+  const [mode, setMode] = useState<PaletteMode>(getInitialMode);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, mode);
+  }, [mode]);
+
+  const theme = useMemo(() => getTheme(mode), [mode]);
+
+  const toggleTheme = () => {
+    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  return (
+    <ThemeModeContext.Provider value={{ toggleTheme, mode }}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </ThemeModeContext.Provider>
+  );
+};

src/app/AppProviders.tsx

@@ -0,0 +1,17 @@
+import { lazy } from 'react';
+import type { RouteObject } from 'react-router-dom';
+
+const HomePage = lazy(() => import('../pages/Home/HomePage'));
+const NotFoundPage = lazy(() => import('../pages/NotFound/NotFoundPage'));
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <HomePage />,
+  },
+
+  {
+    path: '*',
+    element: <NotFoundPage />,
+  },
+];

src/app/router.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+export const ThemeModeContext = createContext({
+  toggleTheme: () => {},
+  mode: 'light',
+});

src/app/themeContext.ts

@@ -1,10 +1,11 @@
 import { Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
 
-export function Brand() {
+export const Brand = () => {
   return (
     <Typography
-      component="a"
-      href="/"
+      component={RouterLink}
+      to="/"
       sx={{
         textDecoration: 'none',
         color: 'inherit',
@@ -14,4 +15,4 @@ export function Brand() {
       dfsync
     </Typography>
   );
-}
+};

src/components/Brand.tsx src/components/Brand/Brand.tsxsrc/components/Brand.tsx renamed to src/components/Brand/Brand.tsx

@@ -31,7 +31,7 @@ const items = [
   },
 ];
 
-export function Features() {
+export const Features = () => {
   return (
     <Container maxWidth="lg" sx={{ pb: { xs: 8, md: 12 } }}>
       <Stack spacing={2} sx={{ mb: 5 }}>
@@ -61,4 +61,4 @@ export function Features() {
       </Grid>
     </Container>
   );
-}
+};

src/components/Features.tsx src/components/Features/Features.tsxsrc/components/Features.tsx renamed to src/components/Features/Features.tsx

@@ -1,6 +1,6 @@
 import { Box, Container, Link, Stack, Typography } from '@mui/material';
 
-export function Footer() {
+export const Footer = () => {
   return (
     <Box
       component="footer"
@@ -43,4 +43,4 @@ export function Footer() {
       </Container>
     </Box>
   );
-}
+};

src/components/Footer.tsx src/components/Footer/Footer.tsxsrc/components/Footer.tsx renamed to src/components/Footer/Footer.tsx

@@ -1,16 +1,9 @@
 import GitHubIcon from '@mui/icons-material/GitHub';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import { AppBar, Box, Button, Container, IconButton, Toolbar } from '@mui/material';
-import type { PaletteMode } from '@mui/material';
-import { Brand } from './Brand';
+import { AppBar, Box, Button, Container, Toolbar } from '@mui/material';
+import { Brand } from '../Brand/Brand';
+import { ThemeToggle } from '../ThemeToggle/ThemeToggle.tsx';
 
-type HeaderProps = {
-  mode: PaletteMode;
-  onToggleMode: () => void;
-};
-
-export function Header({ mode, onToggleMode }: HeaderProps) {
+export const Header = () => {
   return (
     <AppBar
       position="sticky"
@@ -51,14 +44,10 @@ export function Header({ mode, onToggleMode }: HeaderProps) {
             >
               GitHub
             </Button>
-            {/*<Box>*/}
-            <IconButton color="inherit" onClick={onToggleMode} aria-label="toggle theme">
-              {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
-            </IconButton>
-            {/*</Box>*/}
+            <ThemeToggle />
           </Box>
         </Toolbar>
       </Container>
     </AppBar>
   );
-}
+};