From 9b8f5d2b40161652a31574ba9a97f49b369018fb Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 12 Jun 2022 13:43:08 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=20Sets=20up=20React-Router?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ src/App.tsx | 23 ++++++++++++---------- src/index.tsx | 5 ++++- src/pages/Home.tsx | 5 +++++ src/styles/colors.ts | 11 +++++++++++ yarn.lock | 46 +++++++++++++++++++++++++++++++++++++++++++- 6 files changed, 80 insertions(+), 12 deletions(-) create mode 100644 src/pages/Home.tsx create mode 100644 src/styles/colors.ts diff --git a/package.json b/package.json index e17dff0..8dfa65f 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,12 @@ "@types/node": "^16.11.39", "@types/react": "^18.0.12", "@types/react-dom": "^18.0.5", + "@types/react-router-dom": "^5.3.3", "@types/styled-components": "^5.1.25", "jest-styled-components": "^7.0.8", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "styled-components": "^5.3.5", "typescript": "^4.7.3", diff --git a/src/App.tsx b/src/App.tsx index 53dced8..a352895 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,24 @@ import React from 'react'; +import { Route, Routes } from 'react-router-dom'; import Styled from 'styled-components'; -import Demo from 'components/Demo'; +import Home from 'pages/Home'; +import colors from 'styles/colors'; import 'App.css'; -const Container = Styled.div` - background: #bfc; - width: fit-content; - margin: 1rem auto; - padding: 0.5rem 1rem; - border-radius: 6px; +const Container = Styled.main` + background: ${colors.background}; + color: ${colors.textColor}; + width: 100vw; + height: 100vh; + margin: 0; `; function App() { return ( - -

Hello 👋

- + + + } /> + ); } diff --git a/src/index.tsx b/src/index.tsx index 032464f..db18799 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; @@ -9,7 +10,9 @@ const root = ReactDOM.createRoot( ); root.render( - + + + ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..c26c7de --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,5 @@ + + +const Home = (): JSX.Element =>
Home Page
; + +export default Home; diff --git a/src/styles/colors.ts b/src/styles/colors.ts new file mode 100644 index 0000000..8881c5a --- /dev/null +++ b/src/styles/colors.ts @@ -0,0 +1,11 @@ + +const colors = { + primary: '#9fef00', + textColor: '#ffffff', + textColorSecondary: '#a4b1cd', + background: '#141d2b', + backgroundDarker: '#111927', + backgroundLighter: '#1a2332', +}; + +export default colors; diff --git a/yarn.lock b/yarn.lock index c899387..a297bff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1026,7 +1026,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.18.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== @@ -1891,6 +1891,11 @@ dependencies: "@types/node" "*" +"@types/history@^4.7.11": + version "4.7.11" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" + integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== + "@types/hoist-non-react-statics@*": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" @@ -2008,6 +2013,23 @@ dependencies: "@types/react" "*" +"@types/react-router-dom@^5.3.3": + version "5.3.3" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" + integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== + dependencies: + "@types/history" "^4.7.11" + "@types/react" "*" + "@types/react-router" "*" + +"@types/react-router@*": + version "5.1.18" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3" + integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g== + dependencies: + "@types/history" "^4.7.11" + "@types/react" "*" + "@types/react@*", "@types/react@^18.0.12": version "18.0.12" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.12.tgz#cdaa209d0a542b3fcf69cf31a03976ec4cdd8840" @@ -4711,6 +4733,13 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +history@^5.2.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b" + integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== + dependencies: + "@babel/runtime" "^7.7.6" + hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -7307,6 +7336,21 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@^6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d" + integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw== + dependencies: + history "^5.2.0" + react-router "6.3.0" + +react-router@6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557" + integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== + dependencies: + history "^5.2.0" + react-scripts@5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"