mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-02-07 01:28:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Updated the root structure of Client side

Browse Source
This commit is contained in:
veyselboybay
2024-05-06 12:29:36 -04:00
parent d4d684d7c8
commit a76cf36c82
24 changed files with 237 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Client/index.html
View File

@@ -1,13 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Uptime Genie</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

42
Client/package-lock.json generated
View File

@@ -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",

4
Client/package.json
View File

@@ -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",

48
Client/src/App.jsx
View File

@@ -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 (
<>
<div className="app-container" style={{ width: '500px' }}>
<DropDown
id="team-member-autocomplete"
options={teamMembers}
label="Select team member"
value={selectedTeamMember}
onChange={handleTeamMemberChange}
/>
</div>
<Routes>
<Route exact path='/' element={<HomeLayout />} />
<Route exact path='/register' element={<Register />} />
<Route exact path='/login' element={<Login />} />
<Route path='*' element={<NotFound />} />
</Routes>
</>
);
)
}
export default App

1
Client/src/Components/Dropdown/index.css Normal file
View File

@@ -0,0 +1 @@
/* dropdown styles*/

28
Client/src/Components/Dropdown/index.jsx Normal file
View File

@@ -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 (
<Autocomplete
id={id}
options={options}
getOptionLabel={(option) => option.name}
value={value}
onChange={onChange}
renderInput={(params) => <TextField {...params} label={label} />}
/>
);
};
// 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;

1
Client/src/Components/DropdownTeamMember/index.css Normal file
View File

@@ -0,0 +1 @@
/*Dropdown Team Member styles*/

46
Client/src/Components/DropdownTeamMember/index.jsx Normal file
View File

@@ -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 (
<>
<div className="app-container" style={{ width: '500px' }}>
<DropDown
id="team-member-autocomplete"
options={teamMembers}
label="Select team member"
value={selectedTeamMember}
onChange={handleTeamMemberChange}
/>
</div>
</>
);
}
export default DropdownTeamMember

1
Client/src/Components/NavBar/index.css Normal file
View File

@@ -0,0 +1 @@
/* NavBar Component Styles*/

10
Client/src/Components/NavBar/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
import './index.css'
const NavBar = () => {
return (
<div>NavBar Component</div>
)
}
export default NavBar

1
Client/src/Layouts/HomeLayout/index.css Normal file
View File

@@ -0,0 +1 @@
/*Homelayout styles*/

17
Client/src/Layouts/HomeLayout/index.jsx Normal file
View File

@@ -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 (
<>
<NavBar />
<Home />
<Outlet />
</>
)
}
export default HomeLayout

1
Client/src/Pages/Home/index.css Normal file
View File

@@ -0,0 +1 @@
/* Home Page Styles*/

15
Client/src/Pages/Home/index.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react'
import DropdownTeamMember from '../../Components/DropdownTeamMember'
import './index.css'
const Home = () => {
return (
<>
<div>Home</div>
<DropdownTeamMember />
</>
)
}
export default Home

1
Client/src/Pages/Login/index.css Normal file
View File

@@ -0,0 +1 @@
/*Login styles*/

10
Client/src/Pages/Login/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
import './index.css'
const Login = () => {
return (
<div>Login</div>
)
}
export default Login

1
Client/src/Pages/NotFound/index.css Normal file
View File

@@ -0,0 +1 @@
/*Notfoundpage styles*/

10
Client/src/Pages/NotFound/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
import './index.css'
const NotFound = () => {
return (
<div>NotFoundPage</div>
)
}
export default NotFound

1
Client/src/Pages/ReadMe.md Normal file
View File

@@ -0,0 +1 @@
#Pages Folder

1
Client/src/Pages/Register/index.css Normal file
View File

@@ -0,0 +1 @@
/*REgister styles*/

9
Client/src/Pages/Register/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const Register = () => {
return (
<div>Register</div>
)
}
export default Register

1
Client/src/Utils/ReadMe.md Normal file
View File

@@ -0,0 +1 @@
#Utils folder

7
Client/src/index.css
View File

@@ -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;
}
}
}

5
Client/src/main.jsx
View File

@@ -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(
<React.StrictMode>
<App />
<Router>
<App />
</Router>
</React.StrictMode>,
)