diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..a3c03c6 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "team58", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} diff --git a/sports-matcher/package.json b/sports-matcher/package.json index bad46ea..e8e0974 100644 --- a/sports-matcher/package.json +++ b/sports-matcher/package.json @@ -3,11 +3,18 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.8.1", + "@emotion/styled": "^11.8.1", + "@mui/icons-material": "^5.4.4", + "@mui/material": "^5.4.4", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^5.1.3", "react": "^17.0.2", + "react-bootstrap": "^2.2.0", "react-dom": "^17.0.2", + "react-router-dom": "^6.2.2", "react-scripts": "^5.0.0", "web-vitals": "^2.1.4" }, diff --git a/sports-matcher/public/index.html b/sports-matcher/public/index.html index aa069f2..c87dbda 100644 --- a/sports-matcher/public/index.html +++ b/sports-matcher/public/index.html @@ -24,6 +24,12 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + React App diff --git a/sports-matcher/src/App.js b/sports-matcher/src/App.js index 3784575..e631343 100644 --- a/sports-matcher/src/App.js +++ b/sports-matcher/src/App.js @@ -1,23 +1,16 @@ -import logo from './logo.svg'; import './App.css'; - +import { Routes, Route, Link } from "react-router-dom"; +import SignIn from './SignIn'; +import SignUp from './SignUp'; +import Home from './Home'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ + } /> + } /> + } /> +
); } diff --git a/sports-matcher/src/Home.css b/sports-matcher/src/Home.css new file mode 100644 index 0000000..84dede7 --- /dev/null +++ b/sports-matcher/src/Home.css @@ -0,0 +1,4 @@ +h1, h2{ + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: black; +} \ No newline at end of file diff --git a/sports-matcher/src/Home.js b/sports-matcher/src/Home.js new file mode 100644 index 0000000..c42e1fa --- /dev/null +++ b/sports-matcher/src/Home.js @@ -0,0 +1,46 @@ +import * as React from 'react'; +import Homebar from './Homebar'; +import { Carousel } from 'react-bootstrap'; +import './Home.css'; +export default function Home() { + return( + + + + + Connect Slide + +

Connect

+

Connect with other athletes in your area!

+ + + + Schedule Slide + +

Schedule

+

Schedule sport meets with other athletes!

+ + + + Rent Slide + +

Rent

+

Rent sports equipment from other athletes!

+ + + + + ) +} \ No newline at end of file diff --git a/sports-matcher/src/Homebar.js b/sports-matcher/src/Homebar.js new file mode 100644 index 0000000..7f7e49f --- /dev/null +++ b/sports-matcher/src/Homebar.js @@ -0,0 +1,44 @@ +import * as React from 'react'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; +import Container from '@mui/material/Container'; +import Button from '@mui/material/Button'; +import { useNavigate } from 'react-router-dom'; + +export default function Navbar(){ + + const navigate = useNavigate(); + + return ( + + + + + Sports Matcher + + + + + + + + + ); +}; diff --git a/sports-matcher/src/Navbar.js b/sports-matcher/src/Navbar.js new file mode 100644 index 0000000..6fef1b2 --- /dev/null +++ b/sports-matcher/src/Navbar.js @@ -0,0 +1,153 @@ +import * as React from 'react'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import Toolbar from '@mui/material/Toolbar'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Menu from '@mui/material/Menu'; +import MenuIcon from '@mui/icons-material/Menu'; +import Container from '@mui/material/Container'; +import Button from '@mui/material/Button'; +import Tooltip from '@mui/material/Tooltip'; +import MenuItem from '@mui/material/MenuItem'; +import AccountCircle from '@mui/icons-material/AccountCircle'; +import ForumIcon from '@mui/icons-material/Forum'; +import { useNavigate } from 'react-router-dom'; + +const pages = ['Dashboard']; + +export default function Navbar(){ + const [anchorElNav, setAnchorElNav] = React.useState(null); + const [anchorElUser, setAnchorElUser] = React.useState(null); + + const handleOpenNavMenu = (event) => { + setAnchorElNav(event.currentTarget); + }; + const handleOpenUserMenu = (event) => { + setAnchorElUser(event.currentTarget); + }; + + const handleCloseNavMenu = () => { + setAnchorElNav(null); + }; + + const handleCloseUserMenu = () => { + setAnchorElUser(null); + }; + + const navigate = useNavigate(); + + return ( + + + + + Sports Matcher + + + + + + + + {pages.map((page) => ( + + {page} + + ))} + + + + Sports Matcher + + + {pages.map((page) => ( + + ))} + + + + + + + + + + + + + + + + + + Profile + + + Account + + navigate('sign-in')}> + Sign Out + + + + + + + ); +}; diff --git a/sports-matcher/src/SignIn.js b/sports-matcher/src/SignIn.js new file mode 100644 index 0000000..a5df9a6 --- /dev/null +++ b/sports-matcher/src/SignIn.js @@ -0,0 +1,75 @@ +import * as React from 'react'; +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import CssBaseline from '@mui/material/CssBaseline'; +import TextField from '@mui/material/TextField'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Container from '@mui/material/Container'; +import { Link } from '@mui/material'; +import AccountCircleIcon from '@mui/icons-material/AccountCircle'; +import { useNavigate } from 'react-router-dom'; + +export default function SignIn() { + const navigate = useNavigate(); + const handleSubmit = (event) => { + event.preventDefault(); + const data = new FormData(event.currentTarget); + // eslint-disable-next-line no-console + if(data.get('username') == "admin" && data.get('password') == "admin"){ + navigate('/'); + } + }; + return ( + + + + + + + + Sign in + + + + + + + {"Don't have an account?"} + + + + + )} \ No newline at end of file diff --git a/sports-matcher/src/SignUp.js b/sports-matcher/src/SignUp.js new file mode 100644 index 0000000..36f69c7 --- /dev/null +++ b/sports-matcher/src/SignUp.js @@ -0,0 +1,92 @@ +import * as React from 'react'; +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import CssBaseline from '@mui/material/CssBaseline'; +import TextField from '@mui/material/TextField'; +import Box from '@mui/material/Box'; +import AccountBoxIcon from '@mui/icons-material/AccountBox'; +import Typography from '@mui/material/Typography'; +import Container from '@mui/material/Container'; +import { Link } from '@mui/material'; +import { Grid } from '@mui/material'; +import { useNavigate } from 'react-router-dom'; + +export default function SignUp() { + return ( + + + + + + + + Sign up + + + + + + + + + + + + + + + + + + + {'Already have an account?'} + + + + + )} \ No newline at end of file diff --git a/sports-matcher/src/index.js b/sports-matcher/src/index.js index ef2edf8..78717fc 100644 --- a/sports-matcher/src/index.js +++ b/sports-matcher/src/index.js @@ -1,13 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { BrowserRouter } from "react-router-dom"; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( - + - , + , document.getElementById('root') );