From a76cf36c8223a8676cd1b9c84bfb1498b17ef5da Mon Sep 17 00:00:00 2001 From: veyselboybay Date: Mon, 6 May 2024 12:29:36 -0400 Subject: [PATCH] Updated the root structure of Client side --- Client/index.html | 25 +++++----- Client/package-lock.json | 42 +++++++++++++++- Client/package.json | 4 +- Client/src/App.jsx | 48 ++++++------------- Client/src/Components/Dropdown/index.css | 1 + Client/src/Components/Dropdown/index.jsx | 28 +++++++++++ .../Components/DropdownTeamMember/index.css | 1 + .../Components/DropdownTeamMember/index.jsx | 46 ++++++++++++++++++ Client/src/Components/NavBar/index.css | 1 + Client/src/Components/NavBar/index.jsx | 10 ++++ Client/src/Layouts/HomeLayout/index.css | 1 + Client/src/Layouts/HomeLayout/index.jsx | 17 +++++++ Client/src/Pages/Home/index.css | 1 + Client/src/Pages/Home/index.jsx | 15 ++++++ Client/src/Pages/Login/index.css | 1 + Client/src/Pages/Login/index.jsx | 10 ++++ Client/src/Pages/NotFound/index.css | 1 + Client/src/Pages/NotFound/index.jsx | 10 ++++ Client/src/Pages/ReadMe.md | 1 + Client/src/Pages/Register/index.css | 1 + Client/src/Pages/Register/index.jsx | 9 ++++ Client/src/Utils/ReadMe.md | 1 + Client/src/index.css | 7 ++- Client/src/main.jsx | 5 +- 24 files changed, 237 insertions(+), 49 deletions(-) create mode 100644 Client/src/Components/Dropdown/index.css create mode 100644 Client/src/Components/Dropdown/index.jsx create mode 100644 Client/src/Components/DropdownTeamMember/index.css create mode 100644 Client/src/Components/DropdownTeamMember/index.jsx create mode 100644 Client/src/Components/NavBar/index.css create mode 100644 Client/src/Components/NavBar/index.jsx create mode 100644 Client/src/Layouts/HomeLayout/index.css create mode 100644 Client/src/Layouts/HomeLayout/index.jsx create mode 100644 Client/src/Pages/Home/index.css create mode 100644 Client/src/Pages/Home/index.jsx create mode 100644 Client/src/Pages/Login/index.css create mode 100644 Client/src/Pages/Login/index.jsx create mode 100644 Client/src/Pages/NotFound/index.css create mode 100644 Client/src/Pages/NotFound/index.jsx create mode 100644 Client/src/Pages/ReadMe.md create mode 100644 Client/src/Pages/Register/index.css create mode 100644 Client/src/Pages/Register/index.jsx create mode 100644 Client/src/Utils/ReadMe.md diff --git a/Client/index.html b/Client/index.html index 0c589eccd..95d113e91 100644 --- a/Client/index.html +++ b/Client/index.html @@ -1,13 +1,16 @@ - - - - - Vite + React - - -
- - - + + + + + + Uptime Genie + + + +
+ + + + \ No newline at end of file diff --git a/Client/package-lock.json b/Client/package-lock.json index f8b8573f2..454b381c9 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -14,7 +14,9 @@ "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router": "^6.23.0", + "react-router-dom": "^6.23.0" }, "devDependencies": { "@types/react": "^18.2.66", @@ -1380,6 +1382,14 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.17.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz", @@ -4114,6 +4124,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", + "dependencies": { + "@remix-run/router": "1.16.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz", + "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==", + "dependencies": { + "@remix-run/router": "1.16.0", + "react-router": "6.23.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/Client/package.json b/Client/package.json index 2561723d2..f8025f1de 100644 --- a/Client/package.json +++ b/Client/package.json @@ -16,7 +16,9 @@ "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router": "^6.23.0", + "react-router-dom": "^6.23.0" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 0ef901b29..1c388ab5d 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,43 +1,23 @@ -import * as React from 'react'; -import { useState } from 'react' + +import { Routes, Route } from 'react-router-dom' import './App.css' -import '@fontsource/roboto/300.css'; -import '@fontsource/roboto/400.css'; -import '@fontsource/roboto/500.css'; -import '@fontsource/roboto/700.css'; -import DropDown from './Dropdown'; +import NotFound from './Pages/NotFound' +import Login from './Pages/Login' +import Register from './Pages/Register' +import HomeLayout from './Layouts/HomeLayout' + function App() { - const [selectedTeamMember, setSelectedTeamMember] = useState(null); - - const teamMembers = [ - { id: 1, name: 'John Doe' }, - { id: 2, name: 'Jane Smith' }, - { id: 3, name: 'Alex Johnson' }, - // more team members... - ]; - - const handleTeamMemberChange = (event, value) => { - setSelectedTeamMember(value); - }; - - const handleSubmit = () => { - alert(`Selected Team Member: ${selectedTeamMember ? selectedTeamMember.name : 'None'}`); - }; - return ( <> -
- -
+ + } /> + } /> + } /> + } /> + - ); + ) } export default App diff --git a/Client/src/Components/Dropdown/index.css b/Client/src/Components/Dropdown/index.css new file mode 100644 index 000000000..a79cfcf78 --- /dev/null +++ b/Client/src/Components/Dropdown/index.css @@ -0,0 +1 @@ +/* dropdown styles*/ \ No newline at end of file diff --git a/Client/src/Components/Dropdown/index.jsx b/Client/src/Components/Dropdown/index.jsx new file mode 100644 index 000000000..f21623a08 --- /dev/null +++ b/Client/src/Components/Dropdown/index.jsx @@ -0,0 +1,28 @@ +import PropTypes from 'prop-types'; + +import Autocomplete from '@mui/material/Autocomplete'; +import TextField from '@mui/material/TextField'; + +const Dropdown = ({ id, label, options, onChange, value }) => { + return ( + option.name} + value={value} + onChange={onChange} + renderInput={(params) => } + /> + ); +}; + +// Define PropTypes for DropDown component +Dropdown.propTypes = { + id: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + options: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, + value: PropTypes.object.isRequired, +}; + +export default Dropdown; diff --git a/Client/src/Components/DropdownTeamMember/index.css b/Client/src/Components/DropdownTeamMember/index.css new file mode 100644 index 000000000..70ba13960 --- /dev/null +++ b/Client/src/Components/DropdownTeamMember/index.css @@ -0,0 +1 @@ +/*Dropdown Team Member styles*/ \ No newline at end of file diff --git a/Client/src/Components/DropdownTeamMember/index.jsx b/Client/src/Components/DropdownTeamMember/index.jsx new file mode 100644 index 000000000..335afd977 --- /dev/null +++ b/Client/src/Components/DropdownTeamMember/index.jsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { useState } from 'react' +import '@fontsource/roboto/300.css'; +import '@fontsource/roboto/400.css'; +import '@fontsource/roboto/500.css'; +import '@fontsource/roboto/700.css'; +// import DropDown from './Dropdown'; +import DropDown from '../Dropdown' + + + +const DropdownTeamMember = () => { + const [selectedTeamMember, setSelectedTeamMember] = useState(null); + + const teamMembers = [ + { id: 1, name: 'John Doe' }, + { id: 2, name: 'Jane Smith' }, + { id: 3, name: 'Alex Johnson' }, + // more team members... + ]; + + const handleTeamMemberChange = (event, value) => { + setSelectedTeamMember(value); + }; + + const handleSubmit = () => { + alert(`Selected Team Member: ${selectedTeamMember ? selectedTeamMember.name : 'None'}`); + }; + + return ( + <> +
+ +
+ + ); + +} + +export default DropdownTeamMember \ No newline at end of file diff --git a/Client/src/Components/NavBar/index.css b/Client/src/Components/NavBar/index.css new file mode 100644 index 000000000..c99251fe0 --- /dev/null +++ b/Client/src/Components/NavBar/index.css @@ -0,0 +1 @@ +/* NavBar Component Styles*/ \ No newline at end of file diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx new file mode 100644 index 000000000..f957537f2 --- /dev/null +++ b/Client/src/Components/NavBar/index.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import './index.css' + +const NavBar = () => { + return ( +
NavBar Component
+ ) +} + +export default NavBar \ No newline at end of file diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css new file mode 100644 index 000000000..d6a7f5707 --- /dev/null +++ b/Client/src/Layouts/HomeLayout/index.css @@ -0,0 +1 @@ +/*Homelayout styles*/ \ No newline at end of file diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx new file mode 100644 index 000000000..454f1452a --- /dev/null +++ b/Client/src/Layouts/HomeLayout/index.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import NavBar from '../../Components/NavBar' +import { Outlet } from 'react-router' +import Home from '../../Pages/Home' +import './index.css' + +const HomeLayout = () => { + return ( + <> + + + + + ) +} + +export default HomeLayout \ No newline at end of file diff --git a/Client/src/Pages/Home/index.css b/Client/src/Pages/Home/index.css new file mode 100644 index 000000000..fdb4ddd1b --- /dev/null +++ b/Client/src/Pages/Home/index.css @@ -0,0 +1 @@ +/* Home Page Styles*/ \ No newline at end of file diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx new file mode 100644 index 000000000..f1c6a947c --- /dev/null +++ b/Client/src/Pages/Home/index.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import DropdownTeamMember from '../../Components/DropdownTeamMember' +import './index.css' + + +const Home = () => { + return ( + <> +
Home
+ + + ) +} + +export default Home \ No newline at end of file diff --git a/Client/src/Pages/Login/index.css b/Client/src/Pages/Login/index.css new file mode 100644 index 000000000..7c7776653 --- /dev/null +++ b/Client/src/Pages/Login/index.css @@ -0,0 +1 @@ +/*Login styles*/ \ No newline at end of file diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx new file mode 100644 index 000000000..fbe686625 --- /dev/null +++ b/Client/src/Pages/Login/index.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import './index.css' + +const Login = () => { + return ( +
Login
+ ) +} + +export default Login \ No newline at end of file diff --git a/Client/src/Pages/NotFound/index.css b/Client/src/Pages/NotFound/index.css new file mode 100644 index 000000000..937c1ee8d --- /dev/null +++ b/Client/src/Pages/NotFound/index.css @@ -0,0 +1 @@ +/*Notfoundpage styles*/ \ No newline at end of file diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx new file mode 100644 index 000000000..02138b326 --- /dev/null +++ b/Client/src/Pages/NotFound/index.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import './index.css' + +const NotFound = () => { + return ( +
NotFoundPage
+ ) +} + +export default NotFound \ No newline at end of file diff --git a/Client/src/Pages/ReadMe.md b/Client/src/Pages/ReadMe.md new file mode 100644 index 000000000..6d80b467f --- /dev/null +++ b/Client/src/Pages/ReadMe.md @@ -0,0 +1 @@ +#Pages Folder \ No newline at end of file diff --git a/Client/src/Pages/Register/index.css b/Client/src/Pages/Register/index.css new file mode 100644 index 000000000..0a52fcec9 --- /dev/null +++ b/Client/src/Pages/Register/index.css @@ -0,0 +1 @@ +/*REgister styles*/ \ No newline at end of file diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx new file mode 100644 index 000000000..6429ae2c0 --- /dev/null +++ b/Client/src/Pages/Register/index.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Register = () => { + return ( +
Register
+ ) +} + +export default Register \ No newline at end of file diff --git a/Client/src/Utils/ReadMe.md b/Client/src/Utils/ReadMe.md new file mode 100644 index 000000000..005e00a06 --- /dev/null +++ b/Client/src/Utils/ReadMe.md @@ -0,0 +1 @@ +#Utils folder \ No newline at end of file diff --git a/Client/src/index.css b/Client/src/index.css index 6119ad9a8..d761fd0ba 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -18,6 +18,7 @@ a { color: #646cff; text-decoration: inherit; } + a:hover { color: #535bf2; } @@ -46,9 +47,11 @@ button { cursor: pointer; transition: border-color 0.25s; } + button:hover { border-color: #646cff; } + button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; @@ -59,10 +62,12 @@ button:focus-visible { color: #213547; background-color: #ffffff; } + a:hover { color: #747bff; } + button { background-color: #f9f9f9; } -} +} \ No newline at end of file diff --git a/Client/src/main.jsx b/Client/src/main.jsx index 54b39dd1d..8cb8bd9ec 100644 --- a/Client/src/main.jsx +++ b/Client/src/main.jsx @@ -2,9 +2,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' +import { BrowserRouter as Router, HashRouter } from 'react-router-dom' ReactDOM.createRoot(document.getElementById('root')).render( - + + + , )