diff --git a/sports-matcher/package.json b/sports-matcher/package.json index 71556c7..e8e0974 100644 --- a/sports-matcher/package.json +++ b/sports-matcher/package.json @@ -10,7 +10,9 @@ "@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", 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 13e5403..e631343 100644 --- a/sports-matcher/src/App.js +++ b/sports-matcher/src/App.js @@ -2,10 +2,12 @@ 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 (
+ } /> } /> } /> 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 index 6192d11..a5df9a6 100644 --- a/sports-matcher/src/SignIn.js +++ b/sports-matcher/src/SignIn.js @@ -8,8 +8,18 @@ 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 ( @@ -27,15 +37,15 @@ export default function SignIn() { Sign in - +