hkirat · ankit-k56 · Apr 21, 2023 · May 24, 2023
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>
-  <body>
+  <body class="bg-gray-800">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,13 +9,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/material": "^5.12.1",
+    "@mui/styled-engine-sc": "^5.12.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "styled-components": "^5.3.9"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
     "vite": "^4.2.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,8 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  margin: 0 ;
+  padding: 0;
+  background-color: gray;
   text-align: center;
 }
 
@@ -34,7 +35,7 @@
 }
 
 .card {
-  padding: 2em;
+  padding: 0;
 }
 
 .read-the-docs {

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,26 +1,51 @@
 /*
  * Temporary problems array schema
  */
+import ProblemStatement from "./Pages/SingleQuestion";
+import Home from "./Pages/Home";
+import NavBar from "./component/NavBar";
+import Login from "./Pages/LogIN";
+import SignUp from "./Pages/SignUp";
+
+import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements, Navigate } from "react-router-dom";
 const problems = [{
     title: "201. Bitwise AND of Numbers Range",
     difficulty: "Medium",
-    acceptance: "42%"
+    acceptance: "42%",
+    status1: false
 },{
     title: "201. Bitwise AND of Numbers Range",
     difficulty: "Medium",
-    acceptance: "412%"
+    acceptance: "412%",
+    status1: false
 },
     {
         title: "202. Happy Number",
         difficulty: "Easy",
-        acceptance: "54.9%"
+        acceptance: "54.9%",
+        status1: false
     },
     {
         title: "203. Remove Linked List Elements",
         difficulty: "Hard",
-        acceptance: "42%"
+        acceptance: "42%",
+        status1: false
     }];
-
+    const router = createBrowserRouter(
+        createRoutesFromElements(
+            <Route>
+                <Route path="/login" element={<Login/>}></Route>
+                <Route path="/signup" element={<SignUp/>}></Route>
+                <Route path="/" element={<Navigate to='/problems'/>}></Route>
+                <Route path='/problems' element={<NavBar/>} >
+                    <Route index element={<Home/>}></Route>
+                    <Route path="/problems/:id" element={<ProblemStatement/>}></Route>
+                </Route>
+            </Route>
+
+        )
+    )
+
 
 function App() {
 
@@ -32,28 +57,14 @@ function App() {
      */
 
     return (
-    <div>
-        Finish the assignment! Look at the comments in App.jsx as a starting point
+    <div className="bg-black-600">
+        {/* Finish the assignment! Look at the comments in App.jsx as a starting point
+         */}
+         <RouterProvider router={router}/>
     </div>
   )
 }
 
 // A demo component
-function ProblemStatement(props) {
-    const title = props.title;
-    const acceptance = props.acceptance;
-    const difficulty = props.difficulty;
 
-    return <tr>
-        <td>
-            {title}
-        </td>
-        <td>
-            {acceptance}
-        </td>
-        <td>
-            {difficulty}
-        </td>
-    </tr>
-}
 export default App
diff --git a/src/Pages/Auth.css b/src/Pages/Auth.css
@@ -0,0 +1,28 @@
+/* .auth-body{
+    display: flex ;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+} */
+.auth-container{
+    position: absolute;
+    top: 20%;
+    color: white;
+    left: 30%;
+    background-color: #474ff4;
+    padding: 40px;
+    border-radius: 20px;
+    width: 500px;
+    display: flex;
+    flex-direction: column;
+    line-height: 40px;
+}
+.auth-container > button{
+    margin: 15px 0px;
+    width: 15%;
+    background-color: white;
+    color: black;
+
+}
+
+
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
@@ -0,0 +1,10 @@
+import QuestionTable from "../component/QuestionTable";
+
+const Home = ()=>{
+    return(
+        <>
+            <QuestionTable/>
+        </>
+    )
+}
+export default Home
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
@@ -0,0 +1,17 @@
+import "./Auth.css"
+import { Button } from "@mui/material"
+const Login = () =>{
+    return(
+
+        <div className="auth-container">
+            <h1>Login</h1>
+            <label htmlFor="username">Username: </label>
+            <input name="username" type="text" />
+            <label htmlFor="password">Password: </label>
+            <input name="password" type="password" />
+            <Button  variant="contained">Login</Button>
+        </div>
+
+    )
+}
+export default Login
diff --git a/src/Pages/SignUp.jsx b/src/Pages/SignUp.jsx
@@ -0,0 +1,17 @@
+import "./Auth.css"
+import { Button } from "@mui/material"
+const SignUp = () =>{
+    return(
+        <div className="auth-container">
+            <h1>SignUp</h1>
+            <label htmlFor="username">Username: </label>
+            <input name="username" type="text" />
+            <label htmlFor="email">Email :</label>
+            <input name="email" type="email" />
+            <label htmlFor="password">Password: </label>
+            <input name="password" type="password" />
+            <Button variant="contained">Signup</Button>
+        </div>
+    )
+}
+export default SignUp
diff --git a/src/Pages/SingleQuestion.css b/src/Pages/SingleQuestion.css
@@ -0,0 +1,5 @@
+main{
+    display: flex;
+    flex-basis: 0;
+    padding: 20px;
+}
diff --git a/src/Pages/SingleQuestion.jsx b/src/Pages/SingleQuestion.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import "./SingleQuestion.css"
+import { useLocation } from "react-router-dom";
+import QuesInfo from "../component/QuestionInfo";
+import CodeArea from "../component/CodeArea";
+
+function ProblemStatement(props) {
+    const loaction = useLocation()
+    const question = loaction.state.question
+    // console.log(typeof(question))
+
+    return (
+        // <h1>Single Question</h1>
+        <main >
+            <QuesInfo  question={question}/>
+            <CodeArea />
+        </main>
+
+    )
+    // <tr>
+    //     <td>
+    //         {title}
+    //     </td>
+    //     <td>
+    //         {acceptance}
+    //     </td>
+    //     <td>
+    //         {difficulty}
+    //     </td>
+    // </tr>
+}
+export default ProblemStatement
diff --git a/src/assets/logo.avif b/src/assets/logo.avif
diff --git a/src/component/CodeArea.jsx b/src/component/CodeArea.jsx
@@ -0,0 +1,34 @@
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import { useState } from 'react';
+
+const CodeArea = ()=> {
+  const [language, setLanguage] = useState('C++');
+
+  const handleChange = (event) => {
+    setLanguage(event.target.value);
+  };
+
+  return (
+    <div>
+        <FormControl sx={{ m: 1, minWidth: 80 }} size="small">
+        <Select
+            labelId="demo-select-small-label"
+            id="demo-select-small"
+            value={language}
+            onChange={handleChange}
+            style={{ backgroundColor: 'white'}}
+            >
+            <MenuItem value="C++"> <em> C++</em></MenuItem>
+            <MenuItem value="Java">Java</MenuItem>
+            <MenuItem value="Python">Python</MenuItem>
+            <MenuItem value="C">C</MenuItem>
+        </Select>
+        </FormControl>
+        <textarea name="" className='bg-gray-200 rounded-lg p-3' id="" cols="60" rows="40"></textarea>
+    </div>
+  );
+}
+export default CodeArea
diff --git a/src/component/NavBar.css b/src/component/NavBar.css
@@ -0,0 +1,18 @@
+.navbar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 5px 20px;
+    /* background-color: #1d26c9; */
+    color: white;
+}
+.navlink{
+    padding: 0px 10px;
+    text-decoration: none;
+    /* color: white; */
+}
+.navbar img{
+    height: 50px; 
+    border-radius: 50%;
+}
diff --git a/src/component/NavBar.jsx b/src/component/NavBar.jsx
@@ -0,0 +1,21 @@
+import logo from "../assets/logo.avif"
+
+import { Outlet, NavLink } from "react-router-dom"
+// import './NavBar.css'
+const Navbar = () =>{
+    return(
+        <>
+        <div className=" flex justify-between items-center py-[5px]  px-[20px] font-normal border-b-1 bg-gray-900 ">
+            <img src={logo} alt="" className="h-[50px] rounded-full"/>
+            <div className="text-cyan-500">
+                <NavLink className="px-4"  to="/problems">Problems</NavLink>
+                <NavLink className="px-4" to='/login'>Login</NavLink>
+                <NavLink className="px-4" to='/signup'>Signup</NavLink>
+            </div>
+
+        </div>
+        <Outlet/>
+        </>
+    )
+}
+export default Navbar
diff --git a/src/component/QuestionInfo.css b/src/component/QuestionInfo.css
@@ -0,0 +1,14 @@
+.question--cont{
+    margin-right: 10px;
+    line-height: 30px;
+}
+.examples{
+    /* padding: 50px 5px; */
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(93, 111, 247, 0.3);
+}
+.examples>*{
+    padding: 15px 5px ;
+}
diff --git a/src/component/QuestionInfo.jsx b/src/component/QuestionInfo.jsx
@@ -0,0 +1,17 @@
+// import "./QuestionInfo.css"
+const QuesInfo = (props) =>{
+    return(
+        <div className="mr-2 leading-9 text-gray-200">
+            <h2 className="text-cyan-500 text-4xl font-light mb-3">{props.question.title}</h2>
+            <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, accusantium dolores optio reprehenderit, dolor nostrum ipsum suscipit molestias atque itaque quisquam? Necessitatibus nam tempora, voluptate aspernatur hic consequatur iste perferendis!
+            Deleniti illum praesentium, quasi assumenda, similique accusantium odio odit commodi natus fugiat quo voluptatibus nemo nesciunt repellat numquam facere. Nisi, iusto. Esse provident facere ipsum ad molestias atque officiis suscipit.</p>
+            <p>Example 1</p>
+            <div className="flex flex-col bg-[#5d6ff74d] rounded-lg [&>*]:p-4">
+                <p>Input: {props.question.input}</p>
+                <p>Output: {props.question.output}</p>
+                <p>Explanation: {props.question.explanation}</p>
+            </div>
+        </div>
+    )
+}
+export default QuesInfo
diff --git a/src/component/QuestionRow.css b/src/component/QuestionRow.css
@@ -0,0 +1,7 @@
+/* .t--row{
+    margin: 80px;
+} */
+tr > td{
+    padding: 20px;
+    outline: none;
+}