Some formatting
This commit is contained in:
Imbus
parent
97c58068b0
commit
bd9c228073
1 changed files with 148 additions and 72 deletions
|
|
@ -1,93 +1,169 @@
|
|||
import { AppBar, Button, ButtonGroup, Grid, Link, Typography } from "@mui/material";
|
||||
import {
|
||||
AppBar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Grid,
|
||||
Link,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import AcUnitIcon from '@mui/icons-material/AcUnit';
|
||||
import AcUnitIcon from "@mui/icons-material/AcUnit";
|
||||
import { cyan } from "@mui/material/colors";
|
||||
import { useContext } from "react";
|
||||
import { LoginContext } from "./Context";
|
||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||
import HomeIcon from '@mui/icons-material/Home';
|
||||
import PostAddIcon from '@mui/icons-material/PostAdd';
|
||||
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
||||
import HomeIcon from "@mui/icons-material/Home";
|
||||
import PostAddIcon from "@mui/icons-material/PostAdd";
|
||||
|
||||
function LoginDisplay({ sx }: { sx?: React.CSSProperties }): JSX.Element {
|
||||
const loginCtx = useContext(LoginContext);
|
||||
const loginCtx = useContext(LoginContext);
|
||||
|
||||
const handleLogin = (): void => {
|
||||
console.log("Login button pressed")
|
||||
if (loginCtx.currentUser == undefined) {
|
||||
loginCtx.setOpen?.(true); // If the loginCtx.setOpen is defined, call it with true as the argument
|
||||
} else {
|
||||
loginCtx.setCurrentUser?.("");
|
||||
loginCtx.setUserToken?.("");
|
||||
}
|
||||
}
|
||||
|
||||
if (loginCtx.currentUser != undefined) {
|
||||
return (
|
||||
<Box sx={{ textAlign: "right", ...sx }}>
|
||||
<Typography color={"#808080"} sx={{ textAlign: "right" }}>
|
||||
Logged in as:
|
||||
</Typography>
|
||||
<Typography sx={{ textAlign: "right" }}>
|
||||
<Link href='#' underline='hover' onClick={(): void => handleLogin()}>
|
||||
{loginCtx.currentUser}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
const handleLogin = (): void => {
|
||||
console.log("Login button pressed");
|
||||
if (loginCtx.currentUser == undefined) {
|
||||
loginCtx.setOpen?.(true); // If the loginCtx.setOpen is defined, call it with true as the argument
|
||||
} else {
|
||||
loginCtx.setCurrentUser?.("");
|
||||
loginCtx.setUserToken?.("");
|
||||
}
|
||||
};
|
||||
|
||||
if (loginCtx.currentUser != undefined) {
|
||||
return (
|
||||
<Box sx={{ textAlign: "right", ...sx }}>
|
||||
<Button variant="text" startIcon={<AccountCircleIcon />} onClick={(): void => handleLogin()}>Login</Button>
|
||||
</Box>
|
||||
)
|
||||
<Box sx={{ textAlign: "right", ...sx }}>
|
||||
<Typography color={"#808080"} sx={{ textAlign: "right" }}>
|
||||
Logged in as:
|
||||
</Typography>
|
||||
<Typography sx={{ textAlign: "right" }}>
|
||||
<Link href="#" underline="hover" onClick={(): void => handleLogin()}>
|
||||
{loginCtx.currentUser}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ textAlign: "right", ...sx }}>
|
||||
<Button
|
||||
variant="text"
|
||||
startIcon={<AccountCircleIcon />}
|
||||
onClick={(): void => handleLogin()}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function Header({ sx }: { sx?: React.CSSProperties }): JSX.Element {
|
||||
return (
|
||||
<AppBar position='static' sx={{ p: 1, px: 3, display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', ...sx }}>
|
||||
<Grid container px={2} spacing={2} sx={{ flexGrow: 1, display: "flex", maxWidth: "1200px", flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<Grid item xs={12} sm={6} md={4} lg={4}><HeaderLogo clickable /></Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={4}><NavButtons /></Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={4}><LoginDisplay /></Grid>
|
||||
</Grid>
|
||||
</AppBar >)
|
||||
return (
|
||||
<AppBar
|
||||
position="static"
|
||||
sx={{
|
||||
p: 1,
|
||||
px: 3,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
px={2}
|
||||
spacing={2}
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
maxWidth: "1200px",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} md={4} lg={4}>
|
||||
<HeaderLogo clickable />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={4}>
|
||||
<NavButtons />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={4}>
|
||||
<LoginDisplay />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
function HeaderLogo({ clickable, sx }: { clickable?: boolean, sx?: React.CSSProperties }): JSX.Element {
|
||||
const clickStyle = {
|
||||
transition: "0.3s all ease-in-out",
|
||||
":hover": { textShadow: "0 0px 15px" + cyan[400] }
|
||||
}
|
||||
function HeaderLogo({
|
||||
clickable,
|
||||
sx,
|
||||
}: {
|
||||
clickable?: boolean;
|
||||
sx?: React.CSSProperties;
|
||||
}): JSX.Element {
|
||||
const clickStyle = {
|
||||
transition: "0.3s all ease-in-out",
|
||||
":hover": { textShadow: "0 0px 15px" + cyan[400] },
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: "fit-content",
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
userSelect: "none",
|
||||
cursor: "pointer",
|
||||
...clickable ? clickStyle : {},
|
||||
...sx
|
||||
}}>
|
||||
<AcUnitIcon fontSize="large" sx={{ color: cyan[400], mr: 1 }}></AcUnitIcon>
|
||||
<Typography variant='h4'>FrostByte</Typography>
|
||||
</Box>
|
||||
)
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "fit-content",
|
||||
// height: "fit-content",
|
||||
// display: "flex",
|
||||
// flexDirection: "row",
|
||||
// alignItems: "center",
|
||||
// justifyContent: "center",
|
||||
userSelect: "none",
|
||||
cursor: "pointer",
|
||||
...(clickable ? clickStyle : {}),
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<Typography fontSize={"2rem"} sx={{display:"flex", flexDirection:"row", alignItems: "center"}}>
|
||||
<AcUnitIcon
|
||||
fontSize="inherit"
|
||||
sx={{height: "100%", color: cyan[400], mr: 1, mb: 1.1 }}
|
||||
></AcUnitIcon>
|
||||
FrostByte
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function NavButtons({ sx }: { sx?: React.CSSProperties }): JSX.Element {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', maxWidth: "400px", width: 1, ...sx }}>
|
||||
<ButtonGroup variant="text" aria-label="text button group" sx={{ width: "100%" }}>
|
||||
{["Home", "New"].map((typename): JSX.Element => {
|
||||
return (
|
||||
<Button startIcon={typename === "Home" ? <HomeIcon /> : <PostAddIcon />} key={typename} sx={{ px: 2, bgcolor: "#FFFFFF15", width: 1 }}>{typename}</Button>
|
||||
)
|
||||
})}
|
||||
</ButtonGroup>
|
||||
</Box>)
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
maxWidth: "400px",
|
||||
width: 1,
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<ButtonGroup
|
||||
variant="text"
|
||||
aria-label="text button group"
|
||||
sx={{ width: "100%" }}
|
||||
>
|
||||
{["Home", "New"].map((typename): JSX.Element => {
|
||||
return (
|
||||
<Button
|
||||
startIcon={typename === "Home" ? <HomeIcon /> : <PostAddIcon />}
|
||||
key={typename}
|
||||
sx={{ px: 2, bgcolor: "#FFFFFF15", width: 1 }}
|
||||
>
|
||||
{typename}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</ButtonGroup>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
export default Header;
|
||||
|
|
|
|||
Loading…
Reference in a new issue