1
|
import React, { CSSProperties } from 'react'
|
2
|
import './App.css'
|
3
|
import { Routes, Route, Link } from 'react-router-dom'
|
4
|
import Home from './features/Home/Home'
|
5
|
import Catalog from './features/Catalog/Catalog'
|
6
|
import NotFound from './features/NotFound/NotFound'
|
7
|
import { Paper, Theme } from '@mui/material'
|
8
|
import { ThemeProvider } from '@emotion/react'
|
9
|
import { useSelector } from 'react-redux'
|
10
|
import { RootState } from './features/redux/store'
|
11
|
import { createTheme } from '@mui/material/styles'
|
12
|
|
13
|
const App = () => {
|
14
|
const theme: Theme = useSelector((state: RootState) => state.theme.theme)
|
15
|
|
16
|
return (
|
17
|
<ThemeProvider theme={theme}>
|
18
|
<Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
|
19
|
<nav>
|
20
|
<Link to="/">Home</Link>
|
21
|
<Link to="/catalog">Catalog</Link>
|
22
|
</nav>
|
23
|
<Routes>
|
24
|
<Route path="/" element={<Home />} />
|
25
|
<Route path="/catalog" element={<Catalog />} />
|
26
|
<Route path="*" element={<NotFound />} />
|
27
|
</Routes>
|
28
|
</Paper>
|
29
|
</ThemeProvider>
|
30
|
)
|
31
|
}
|
32
|
|
33
|
export default App
|