setup router

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",

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() {
       <div className="songList">
         {charts.map((item, index) => {
           return (
-            <Chart key={index} data={item} />
+            <Link to={`/ls/${item.name}`} key={index}>
+              <Chart key={index} data={item} />
+            </Link>
           )
         })}
       </div>

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;
 }
 

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(
+    <Router>
+      <Routes>
+        <Route path="/" element={<App />} />
+      </Routes>
+    </Router>
+  )
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <Routing />
+  </React.StrictMode>
+);
+