diff --git a/package-lock.json b/package-lock.json index 1605a319..ec8bfd62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.1.2", + "react-router-dom": "^6.24.0", "sass": "^1.77.6", "save-dev": "0.0.1-security" }, @@ -4212,6 +4213,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.0.tgz", + "integrity": "sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -20158,6 +20167,36 @@ } } }, + "node_modules/react-router": { + "version": "6.24.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.0.tgz", + "integrity": "sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg==", + "dependencies": { + "@remix-run/router": "1.17.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.24.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.0.tgz", + "integrity": "sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==", + "dependencies": { + "@remix-run/router": "1.17.0", + "react-router": "6.24.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-shallow-renderer": { "version": "16.15.0", "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", diff --git a/package.json b/package.json index 50b45ffa..f87243ab 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.1.2", + "react-router-dom": "^6.24.0", "sass": "^1.77.6", "save-dev": "0.0.1-security" }, diff --git a/src/App.tsx b/src/App.tsx index 1a227ece..abd182e0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,12 @@ +/* eslint-disable linebreak-style */ import React from 'react'; -import LandingPage from './pages/LandingPage'; +import { BrowserRouter as Router } from 'react-router-dom'; +import AppRouter from './router'; const App: React.FC = () => ( -
- -
+ + + ); -export default App; +export default App; \ No newline at end of file diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx new file mode 100644 index 00000000..2708ec45 --- /dev/null +++ b/src/components/layout/Footer.tsx @@ -0,0 +1,17 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +const getYear = (): number => new Date().getFullYear(); + +const Footer: React.FC = () => ( + +); + +export default Footer; \ No newline at end of file diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx new file mode 100644 index 00000000..bd999e16 --- /dev/null +++ b/src/components/layout/Header.tsx @@ -0,0 +1,17 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable import/no-extraneous-dependencies */ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Header: React.FC = () => ( +
+ +
+); + +export default Header; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 66a167b4..7b2dfb30 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable linebreak-style */ import React from 'react'; import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; @@ -5,4 +6,8 @@ import { store } from './store/store'; import App from './App'; const root = createRoot(document.getElementById('root')!); -root.render(); +root.render( + + + +); \ No newline at end of file diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 555042b8..884a4781 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -2,6 +2,8 @@ import React, { useEffect } from 'react'; import { useAppDispatch, useAppSelector } from '../store/store'; import { loadWelcomeMessage } from '../store/features/welcomeSlice'; import { IWelcomeMessage } from '../utils/types/store'; +import Header from '../components/layout/Header'; +import Footer from '../components/layout/Footer'; import '../styles/LandingPage.scss'; const LandingPage: React.FC = () => { @@ -13,11 +15,15 @@ const LandingPage: React.FC = () => { }, [dispatch]); return ( -
-

- {welcomeMessage.message} -

-
+ <> +
+
+

+ {welcomeMessage.message} +

+
+