added login button

Signed-off-by: Med16-11 <[email protected]>
ceph · Aug 9, 2023 · 6fc71b4 · 6fc71b4
1 parent 3a30b59
commit 6fc71b4
Showing 1 changed file with 25 additions and 10 deletions.
diff --git a/src/components/AppBar/index.jsx b/src/components/AppBar/index.jsx
@@ -1,5 +1,6 @@
+import React from "react";
 import { Link as RouterLink } from "react-router-dom";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { useTheme } from "@mui/material/styles";
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
@@ -8,20 +9,18 @@ import Brightness7Icon from "@mui/icons-material/Brightness7";
 import MuiAppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 
-const PREFIX = 'index';
+const PREFIX = "index";
 
 const classes = {
   appBar: `${PREFIX}-appBar`,
   title: `${PREFIX}-title`,
-  toolbarIcon: `${PREFIX}-toolbarIcon`
+  toolbarIcon: `${PREFIX}-toolbarIcon`,
+  loginButton: `${PREFIX}-loginButton`,
 };
 
-const StyledMuiAppBar = styled(MuiAppBar)((
-  {
-    theme
-  }
-) => ({
+const StyledMuiAppBar = styled(MuiAppBar)(({ theme }) => ({
   [`&.${classes.appBar}`]: {
     zIndex: theme.zIndex.drawer + 1,
   },
@@ -40,7 +39,11 @@ const StyledMuiAppBar = styled(MuiAppBar)((
     alignItems: "center",
     justifyContent: "flex-end",
     padding: "0 8px",
-  }
+  },
+
+  [`& .${classes.loginButton}`]: {
+    marginLeft: "12px",
+  },
 }));
 
 export default function AppBar(props) {
@@ -78,10 +81,22 @@ export default function AppBar(props) {
             Pulpito
           </RouterLink>
         </Typography>
+        <Button
+          component={RouterLink}
+          to="http://localhost:8082/login" 
+          color="inherit"
+          sx={{
+            bgcolor: "#b81f14", 
+            marginLeft: "12px", 
+          }}
+        >
+          Login
+        </Button>
+
         <IconButton onClick={props.toggleDarkMode} size="large">
           {props.darkMode ? <Brightness7Icon /> : <Brightness4Icon />}
         </IconButton>
       </Toolbar>
     </StyledMuiAppBar>
   );
-}
+}