Added Homepage and Navbar

2022-03-06 20:22:23 -05:00
9 changed files with 273 additions and 5 deletions
--- 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",
--- 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`.
    -->
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+  crossorigin="anonymous"
+/>
    <title>React App</title>
  </head>
  <body>
--- 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 (
    <div className="App">
      <Routes>
+        <Route path="" element={<Home />} />
        <Route path="sign-in" element={<SignIn />} />
        <Route path="sign-up" element={<SignUp />} />
      </Routes>
--- a/sports-matcher/src/Home.css
+++ b/sports-matcher/src/Home.css
@@ -0,0 +1,4 @@
+h1, h2{
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: black;
+}
--- a/sports-matcher/src/Home.js
+++ 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(
+    <React.Fragment>
+    <Homebar></Homebar>
+    <Carousel>
+    <Carousel.Item>
+    <img
+      src='https://d39l2hkdp2esp1.cloudfront.net/img/photo/148976/148976_00_2x.jpg'
+      alt="Connect Slide"
+      style={{ height: '680px', width: '2000px'}}
+    />
+    <Carousel.Caption>
+      <h1>Connect</h1>
+      <h2>Connect with other athletes in your area!</h2>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      src='https://www.groovypost.com/wp-content/uploads/2021/08/sports-calendar-featured.jpg'
+      alt="Schedule Slide"
+      style={{ height: '680px', width: '2000px' }}
+    />
+    <Carousel.Caption>
+      <h1>Schedule</h1>
+      <h2>Schedule sport meets with other athletes!</h2>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      src='https://i.pinimg.com/736x/dd/80/c3/dd80c3136a96c2fbf6004aef8e9619f3.jpg'
+      alt="Rent Slide"
+      style={{ height: '680px', width: '2000px' }}
+    />
+    <Carousel.Caption>
+      <h1>Rent</h1>
+      <h2>Rent sports equipment from other athletes!</h2>
+    </Carousel.Caption>
+  </Carousel.Item>
+    </Carousel>
+    </React.Fragment>
+    )
+}
--- a/sports-matcher/src/Homebar.js
+++ 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 (
+    <AppBar position="static" sx={{background: '#00226D'}}>
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ mr: 2, fontSize: '200%', textAlign: 'center', flexGrow: 1, marginLeft: '10%'}}
+          >
+            Sports Matcher
+          </Typography>
+          <Box sx={{display: { xs: 'none', md: 'flex' }}}>
+              <Button
+                sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
+                onClick={() => navigate('sign-up')}
+              >
+                Sign Up
+              </Button>
+              <Button
+                sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
+                onClick={() => navigate('sign-in')}
+              >
+                Sign In
+              </Button>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
--- a/sports-matcher/src/Navbar.js
+++ 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 (
+    <AppBar position="static" sx={{background: '#00226D'}}>
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ mr: 2, display: { xs: 'none', md: 'flex' }, fontSize: '150%', borderRight: '0.05em solid black', borderColor: 'white', paddingRight: '1.5em' }}
+          >
+            Sports Matcher
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: 'block', md: 'none' },
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{page}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
+          >
+            Sports Matcher
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, marginLeft: '2%' }}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+
+          <Box sx={{ flexGrow: 0, marginRight: '1%'}}>
+           <Tooltip title="Chats">
+              <IconButton sx={{ p: 0}}>
+                <ForumIcon sx={{color: 'white'}}></ForumIcon>
+              </IconButton>
+            </Tooltip>
+            </Box>
+            <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title="Settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0}}>
+                <AccountCircle sx={{color: 'white'}}></AccountCircle>
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: '30px' }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+                <MenuItem onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">Profile</Typography>
+                </MenuItem>
+                <MenuItem onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">Account</Typography>
+                </MenuItem>
+                <MenuItem onClick={() => navigate('sign-in')}>
+                  <Typography textAlign="center">Sign Out</Typography>
+                </MenuItem>
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
--- 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 (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
@@ -27,15 +37,15 @@ export default function SignIn() {
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
-          <Box component="form" noValidate sx={{ mt: 1 }}>
+          <Box component="form" noValidate sx={{ mt: 1 }} onSubmit={handleSubmit}>
            <TextField
              margin="normal"
              required
              fullWidth
-              id="email"
-              label="Email Address"
-              name="email"
-              autoComplete="email"
+              id="username"
+              label="Username"
+              name="username"
+              autoComplete="username"
              autoFocus
            />
            <TextField
--- a/sports-matcher/src/SignUp.js
+++ b/sports-matcher/src/SignUp.js
@@ -9,6 +9,7 @@ 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 (