From 329198439691e43f11acf9e785ad9522978e967b Mon Sep 17 00:00:00 2001 From: nenes Date: Mon, 20 Mar 2023 16:16:25 +0100 Subject: [PATCH] setup router --- package-lock.json | 63 +++++++++++++++++++++++++++++++++- package.json | 3 +- src/App.jsx | 5 ++- src/Components/chart/chart.css | 12 +++---- src/main.jsx | 30 +++++++++++----- 5 files changed, 96 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 42483f0..ad9fbb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "devDependencies": { "@types/react": "^18.0.28", @@ -811,6 +812,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1803,6 +1812,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "dependencies": { + "@remix-run/router": "1.4.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "dependencies": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -2597,6 +2636,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -3268,6 +3312,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "requires": { + "@remix-run/router": "1.4.0" + } + }, + "react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "requires": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index ea347fc..f92106b 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/App.jsx b/src/App.jsx index 944d7e5..1f473a8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,4 @@ +import { Link } from 'react-router-dom'; import './App.css'; import charts from './charts.json'; import Chart from './Components/chart/chart'; @@ -8,7 +9,9 @@ function App() {
{charts.map((item, index) => { return ( - + + + ) })}
diff --git a/src/Components/chart/chart.css b/src/Components/chart/chart.css index c3e7ffc..6a6ce36 100644 --- a/src/Components/chart/chart.css +++ b/src/Components/chart/chart.css @@ -1,10 +1,10 @@ .chart { - width: 18%; + width: 18em; padding: 0; margin: 0; background-color: #f97e8e; - border-radius: 15px; - border-bottom: 5px solid #A32D44; + border-radius: 1em; + border-bottom: 0.3em solid #A32D44; transition: transform 0.2s; transform: scale(1); text-align: center; @@ -32,8 +32,8 @@ .chart > .song { padding-top: 20px; background-color: #f06e7f; - border-radius: 15px; - border-bottom: 5px solid #e14c6a; + border-radius: 1em; + border-bottom: 0.3em solid #e14c6a; } .songInfo { @@ -49,7 +49,7 @@ .difficulty-level { margin: 3px; - width: 30px; + width: 2em; border-radius: 5px; } diff --git a/src/main.jsx b/src/main.jsx index 5cc5991..8685715 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,24 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; -ReactDOM.createRoot(document.getElementById('root')).render( + +const Routing = () => { + return( + + + } /> + + + ) +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( - - , -) + + +); +