diff --git a/package-lock.json b/package-lock.json index cd606935..ce923120 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": "^7.1.1" }, "devDependencies": { "@types/react": "^18.0.28", @@ -766,6 +767,11 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -912,6 +918,14 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "dev": true }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "engines": { + "node": ">=18" + } + }, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -1226,6 +1240,29 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -1276,6 +1313,11 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -1318,6 +1360,11 @@ "node": ">=4" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" + }, "node_modules/update-browserslist-db": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", @@ -1853,6 +1900,11 @@ } } }, + "@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1957,6 +2009,11 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "dev": true }, + "cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==" + }, "csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -2176,6 +2233,17 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", + "requires": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + } + }, "resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -2210,6 +2278,11 @@ "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, + "set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" + }, "source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -2237,6 +2310,11 @@ "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", "dev": true }, + "turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" + }, "update-browserslist-db": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", diff --git a/package.json b/package.json index 154dd4dd..837d7f0b 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": "^7.1.1" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/Login.jsx b/src/Login.jsx new file mode 100644 index 00000000..ccfffe1e --- /dev/null +++ b/src/Login.jsx @@ -0,0 +1,37 @@ +import { useState } from "react"; +import { useNavigate } from "react-router"; + +function Login() { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + let navigate = useNavigate(); + + function handleChange(e){ + setUsername(e.target.value); + } + + function handleClick(){ + console.log("Username:" + username); + console.log("Password:" + password); + console.log("Login successfull"); + navigate("/problemset/all"); + } + + return ( + <> +
+ + +
+
+ + setPassword(e.target.value)} /> +
+
+ +
+ + ) +} + +export default Login; \ No newline at end of file diff --git a/src/Problem.jsx b/src/Problem.jsx new file mode 100644 index 00000000..c944b67a --- /dev/null +++ b/src/Problem.jsx @@ -0,0 +1,52 @@ +import { useParams, NavLink } from "react-router"; + +const problems = [{ + id: 1, + title: "201. Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%" +},{ + id: 2, + title: "201. Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "412%" +}, + { + id: 3, + title: "202. Happy Number", + difficulty: "Easy", + acceptance: "54.9%" + }, + { + id: 4, + title: "203. Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%" + }]; + +function Problem() { + const {problem_slug} = useParams(); + const problem = problems.find(problem => +problem.id === +problem_slug); + + return ( + <> + + + + + + + + + + + + + +
TitleDifficultyAcceptance
{problem.title}{problem.difficulty}{problem.acceptance}
+ isActive ? "active": ""} >Show all problems + + ) +} + +export default Problem; \ No newline at end of file diff --git a/src/Problems.jsx b/src/Problems.jsx new file mode 100644 index 00000000..68a0152e --- /dev/null +++ b/src/Problems.jsx @@ -0,0 +1,43 @@ +import { NavLink } from "react-router"; + +const problems = [{ + id: 1, + title: "201. Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%" +},{ + id: 2, + title: "201. Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "412%" +}, + { + id: 3, + title: "202. Happy Number", + difficulty: "Easy", + acceptance: "54.9%" + }, + { + id: 4, + title: "203. Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%" + }]; + +function Problems() { + return ( + <> + + + ) +} + +export default Problems; \ No newline at end of file diff --git a/src/Signup.jsx b/src/Signup.jsx new file mode 100644 index 00000000..7197294b --- /dev/null +++ b/src/Signup.jsx @@ -0,0 +1,32 @@ +import { useState } from "react"; + +function Signup() { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + function onSignup() { + console.log(`Username: ${username}`); + console.log(`Password: ${password}`); + console.log("Signup successfull"); + } + + return ( + <> +
+ + setUsername(e.target.value)} /> +
+ +
+ + setPassword(e.target.value)} /> +
+ +
+ +
+ + ) +} + +export default Signup; \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 5cc59919..ded75791 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,23 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App' +import { BrowserRouter, Routes, Route } from "react-router"; import './index.css' +import App from './App' +import Login from "./Login"; +import Signup from "./Signup"; +import Problems from "./Problems"; +import Problem from "./Problem"; ReactDOM.createRoot(document.getElementById('root')).render( - - - , + + + {/* } > */} + } /> + } /> + + } /> + } /> + {/* */} + + , )