diff --git a/package-lock.json b/package-lock.json index cd606935..fc9f082d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,15 +7,17 @@ "": { "name": "leet-code-frontend", "version": "0.0.0", + "license": "ISC", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.11.2" }, "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", - "vite": "^4.2.0" + "vite": "^4.3.8" } }, "node_modules/@ampproject/remapping": { @@ -766,6 +768,14 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==", + "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", @@ -1010,12 +1020,6 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, - "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true - }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -1034,18 +1038,6 @@ "node": ">=4" } }, - "node_modules/has": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, - "dependencies": { - "function-bind": "^1.1.1" - }, - "engines": { - "node": ">= 0.4.0" - } - }, "node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -1055,18 +1047,6 @@ "node": ">=4" } }, - "node_modules/is-core-module": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", - "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", - "dev": true, - "dependencies": { - "has": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -1158,12 +1138,6 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, - "node_modules/path-parse": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true - }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -1171,9 +1145,9 @@ "dev": true }, "node_modules/postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz", + "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==", "dev": true, "funding": [ { @@ -1183,10 +1157,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -1226,27 +1204,40 @@ "node": ">=0.10.0" } }, - "node_modules/resolve": { - "version": "1.22.2", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", - "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", - "dev": true, + "node_modules/react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", "dependencies": { - "is-core-module": "^2.11.0", - "path-parse": "^1.0.7", - "supports-preserve-symlinks-flag": "^1.0.0" + "@remix-run/router": "1.6.2" }, - "bin": { - "resolve": "bin/resolve" + "engines": { + "node": ">=14" }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "dependencies": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" } }, "node_modules/rollup": { - "version": "3.20.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz", - "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==", + "version": "3.23.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz", + "integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -1297,18 +1288,6 @@ "node": ">=4" } }, - "node_modules/supports-preserve-symlinks-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -1345,15 +1324,14 @@ } }, "node_modules/vite": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz", - "integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==", + "version": "4.3.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", + "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, "dependencies": { "esbuild": "^0.17.5", - "postcss": "^8.4.21", - "resolve": "^1.22.1", - "rollup": "^3.18.0" + "postcss": "^8.4.23", + "rollup": "^3.21.0" }, "bin": { "vite": "bin/vite.js" @@ -1853,6 +1831,11 @@ } } }, + "@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2027,12 +2010,6 @@ "dev": true, "optional": true }, - "function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true - }, "gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -2045,30 +2022,12 @@ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "dev": true }, - "has": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, - "requires": { - "function-bind": "^1.1.1" - } - }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", "dev": true }, - "is-core-module": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", - "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", - "dev": true, - "requires": { - "has": "^1.0.3" - } - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2130,12 +2089,6 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, - "path-parse": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true - }, "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -2143,12 +2096,12 @@ "dev": true }, "postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz", + "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==", "dev": true, "requires": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -2176,21 +2129,27 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, - "resolve": { - "version": "1.22.2", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", - "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", - "dev": true, + "react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "requires": { + "@remix-run/router": "1.6.2" + } + }, + "react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", "requires": { - "is-core-module": "^2.11.0", - "path-parse": "^1.0.7", - "supports-preserve-symlinks-flag": "^1.0.0" + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" } }, "rollup": { - "version": "3.20.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz", - "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==", + "version": "3.23.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz", + "integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -2225,12 +2184,6 @@ "has-flag": "^3.0.0" } }, - "supports-preserve-symlinks-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true - }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -2248,16 +2201,15 @@ } }, "vite": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz", - "integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==", + "version": "4.3.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", + "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, "requires": { "esbuild": "^0.17.5", "fsevents": "~2.3.2", - "postcss": "^8.4.21", - "resolve": "^1.22.1", - "rollup": "^3.18.0" + "postcss": "^8.4.23", + "rollup": "^3.21.0" } }, "yallist": { diff --git a/package.json b/package.json index 154dd4dd..23d9e719 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,17 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.11.2" }, "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", - "vite": "^4.2.0" - } + "vite": "^4.3.8" + }, + "description": "Link to video - https://www.youtube.com/watch?v=569YZm0X5-0", + "main": "vite.config.js", + "author": "", + "license": "ISC" } diff --git a/src/App.css b/src/App.css index b9d355df..e69de29b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.jsx b/src/App.jsx index 7743965b..ccb0b15c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,59 +1,65 @@ -/* - * Temporary problems array schema - */ -const problems = [{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "42%" -},{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "412%" -}, - { - title: "202. Happy Number", - difficulty: "Easy", - acceptance: "54.9%" - }, - { - title: "203. Remove Linked List Elements", - difficulty: "Hard", - acceptance: "42%" - }]; +import React from 'react'; +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import Login from './components/Login'; +import Signup from './components/Signup'; +import Problems from './components/Problems'; +import ProblemDetail from './components/ProblemDetail' -function App() { + const App = () => { - /* Add routing here, routes look like - - /login - Login page - /signup - Signup page - /problemset/all/ - All problems (see problems array above) - /problems/:problem_slug - A single problem page - */ + const problems = [{ + name:"bitwiseand", + title: "201. Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%" + },{ + name:"bitwisean", + title: "201. Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "412%" + }, + { + name:"happy", + title: "202. Happy Number", + difficulty: "Easy", + acceptance: "54.9%" + }, + { + name:"removeLinked", + title: "203. Remove Linked List Elements", + difficulty: "Hard", + acceptance: "41%" + }]; + + const problemInfo = [ + { + title: "Find the subarray with the largest sum, and return its sum", + examples: { + input: "[-2, 1, -3, 4, -1, 2, 1, 5, 4]", + output: "6", + explanation: "The subarray [4, -1, 2, 1] has the largest sum 6" + } + } + ]; + + return ( + + + This is Home Page}/> + }/> + }/> + }/> + } /> + - return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point -
- ) -} + + + ); + }; + + export default App; -// A demo component -function ProblemStatement(props) { - const title = props.title; - const acceptance = props.acceptance; - const difficulty = props.difficulty; - return - - {title} - - - {acceptance} - - - {difficulty} - - -} -export default App + + diff --git a/src/components/Login.jsx b/src/components/Login.jsx new file mode 100644 index 00000000..96b3843d --- /dev/null +++ b/src/components/Login.jsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; + +const Login = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const handleLogin = () => { + // Handle login logic here + }; + + return ( +
+

Login

+ setEmail(e.target.value)} + style={{ padding: '10px', marginBottom: '10px', width: '200px' }} + /> +
+ setPassword(e.target.value)} + style={{ padding: '10px', marginBottom: '10px', width: '200px' }} + /> +
+ +
+ ); +}; + +export default Login; diff --git a/src/components/ProblemDetail.jsx b/src/components/ProblemDetail.jsx new file mode 100644 index 00000000..e25a325f --- /dev/null +++ b/src/components/ProblemDetail.jsx @@ -0,0 +1,33 @@ +import React from 'react'; + +const Title = ({ title }) => { + return

{title}

; +}; + +const Example = ({ example }) => { + const { input, output, explanation } = example; + + return ( +
+

Example

+

Input: {input}

+

Output: {output}

+

Explanation: {explanation}

+
+ ); +}; + +const ProblemDetail = ({ problemInfo }) => { + return ( +
+ {problemInfo.map((problem, index) => ( +
+ + <Example example={problem.examples} /> + </div> + ))} + </div> + ); +}; + +export default ProblemDetail; diff --git a/src/components/Problems.jsx b/src/components/Problems.jsx new file mode 100644 index 00000000..6c4ac9f9 --- /dev/null +++ b/src/components/Problems.jsx @@ -0,0 +1,38 @@ +import React, { useState, useEffect } from 'react'; +import '../styles/Problems.css'; +import { Link } from 'react-router-dom'; + +const Problems = ({ problems }) => { + const [problemsData, setProblemsData] = useState(problems); + + useEffect(() => { + setProblemsData(problems); + }, [problems]); + return ( + <div className="problems-container"> + <h3 className="h33">All Problems</h3> + <table className="problems-table"> + <thead> + <tr> + <th>Link</th> + <th>Title</th> + <th>Difficulty</th> + <th>Acceptance</th> + </tr> + </thead> + <tbody> + {problems.map((problem, index) => ( + <tr key={index}> + <Link to={`/problems/${problem.name}`}>Go to Problem</Link> + <td>{problem.title}</td> + <td>{problem.difficulty}</td> + <td>{problem.acceptance}</td> + </tr> + ))} + </tbody> + </table> + </div> + ); +}; + +export default Problems; diff --git a/src/components/Signup.jsx b/src/components/Signup.jsx new file mode 100644 index 00000000..561e38b5 --- /dev/null +++ b/src/components/Signup.jsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; + +const Signup = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const handleSignup = () => { + // Handle signup logic here + }; + + return ( + <div style={{ textAlign: 'center' }}> + <h2 style={{ marginBottom: '20px' }}>Signup</h2> + <input + type="email" + placeholder="Email" + value={email} + onChange={(e) => setEmail(e.target.value)} + style={{ padding: '10px', marginBottom: '10px', width: '200px' }} + /> + <br /> + <input + type="password" + placeholder="Password" + value={password} + onChange={(e) => setPassword(e.target.value)} + style={{ padding: '10px', marginBottom: '10px', width: '200px' }} + /> + <br /> + <button + onClick={handleSignup} + style={{ + padding: '10px 20px', + backgroundColor: '#333', + color: '#fff', + border: 'none', + cursor: 'pointer', + }} + > + Signup + </button> + </div> + ); +}; + +export default Signup; diff --git a/src/components/SingleProblem/Example.jsx b/src/components/SingleProblem/Example.jsx new file mode 100644 index 00000000..12f5b7f3 --- /dev/null +++ b/src/components/SingleProblem/Example.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +function Example() { + return ( + <div> + + </div> + ) +} + +export default Example diff --git a/src/components/SingleProblem/Title.jsx b/src/components/SingleProblem/Title.jsx new file mode 100644 index 00000000..61919d4c --- /dev/null +++ b/src/components/SingleProblem/Title.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +function Title() { + return ( + <div> + + </div> + ) +} + +export default Title diff --git a/src/styles/Problems.css b/src/styles/Problems.css new file mode 100644 index 00000000..9273d68b --- /dev/null +++ b/src/styles/Problems.css @@ -0,0 +1,40 @@ +.problems-container { + margin: 20px; + } + + body { + background-color: rgb(248, 221, 221); + } + .problems-table { + width: 50%; + border-collapse: collapse; + margin-top: 20px; + } + + .problems-table th, + .problems-table td { + padding: 10px; + text-align: left; + border-bottom: 1px solid #ccc; + } + + .problems-table th { + background-color: #f0f0f0; + } + + .problems-table tr:hover { + background-color: #f8f8f8; + } + + .problems-table td:nth-child(1) { + width: 50%; + } + + .problems-table td:nth-child(2), + .problems-table td:nth-child(3) { + width: 20%; + } + + .h33{ + color: rgb(79, 77, 77); + } \ No newline at end of file