diff --git a/.gitignore b/.gitignore index 278871dd64d0c198b4c4e952c0b0083f03022d42..3301cf29585861a702190e9a085ef95fa9542df4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,2 @@ -<<<<<<< HEAD env .env -======= -.DS_Store -.idea/ -.idea/* -.vs_code/ -.vs_code/* -node_modules -node_modules/* -public/ -public/* ->>>>>>> 81817af8f7ce49e492d2a4bed110d9620b09cbfe diff --git a/frontend/src/App.js b/frontend/src/App.js index 371bd4e439190793911d11f1617f2fa9ca5978ba..abb65f0dfceae7d9c98c057601809270132dd0a3 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,5 +1,6 @@ + import React, { useState } from 'react'; import './App.css'; import Login from './components/auth/login'; @@ -33,6 +34,7 @@ function App() { <Route path="login" element={<Login/>} /> <Route path="register" element={<Register/>}/> </Routes> + </div> ); } diff --git a/frontend/src/components/home.jsx b/frontend/src/components/home.jsx new file mode 100644 index 0000000000000000000000000000000000000000..05dab44897c5a3f7df1c8ad70420a9dcc732c0d5 --- /dev/null +++ b/frontend/src/components/home.jsx @@ -0,0 +1,76 @@ +import React, { useState, useEffect, useRef } from "react"; +import Editor from "@monaco-editor/react"; + +import React, { useState } from "react"; +import "./App.css"; + +const homeComponent = () => { + const [showScreen, setShowScreen] = useState(false); + const [uploadedFileName, setUploadedFileName] = useState(""); + + const handleImageClick = () => { + setShowScreen(true); + }; + + const handleFileUpload = (event) => { + const file = event.target.files[0]; + if (file) { + console.log("Uploaded file:", file.name); + setUploadedFileName(file.name); + } + }; + + return showScreen ? ( + <div className="new-screen"> + <h1 className="greeting2">Past Uploads</h1> + <img src="assets/icon.jpg" alt="sm" className="small-image2" /> + <p className="profileinfo"> + Alice Li <br /> + </p> + <p className="profileinfo2"> + <strong>username:</strong> alice_li409 <br /> + <strong>email: </strong> alice_li409@illinois.edu + </p> + <div className="parent-container"> + <div className="text-box-container"> + <div className="text-box">file1.c</div> + <div className="text-box">file2.c</div> + <div className="text-box">file3.c</div> + <div className="text-box">file4.c</div> + </div> + <div className="text-box-container2"> + <div className="text-box2">Score: 1/10</div> + <div className="text-box2">Score: 5/10</div> + <div className="text-box2">Score: 7/10</div> + <div className="text-box2">Score: 2/10</div> + </div> + </div> + <button onClick={() => setShowScreen(false)}>Go Back</button> + </div> + ) : ( + <div className="App"> + <h1 className="greeting">Hello, xyz!</h1> + <img + src="/images/small-image.jpg" + alt="Small" + className="small-image" + onClick={handleImageClick} + /> + <div className="center-content"> + <label className="upload-button"> + Upload Files + <input type="file" onChange={handleFileUpload} /> + </label> + </div> + <div className="image-container"> + <img + src="/images/large-image.jpg" + alt="Large" + className="large-image" + /> + </div> + </div> + ); +}; + +export default homeComponent;