Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Some formatting

Browse source
This commit is contained in:
Imbus 2023-10-19 02:42:09 +02:00
parent 97c58068b0
commit bd9c228073
1 changed files with 148 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
client/src/Header.tsx
View file

@ -1,25 +1,32 @@
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 handleLogin = (): void => {
console.log("Login button pressed")
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 (
@ -28,66 +35,135 @@ function LoginDisplay({ sx }: { sx?: React.CSSProperties }): JSX.Element {
Logged in as:
</Typography>
<Typography sx={{ textAlign: "right" }}>
<Link href='#' underline='hover' onClick={(): void => handleLogin()}>
<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>
<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>
<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>
</AppBar >)
<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 {
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] }
}
":hover": { textShadow: "0 0px 15px" + cyan[400] },
};
return (
<Box sx={{
<Box
sx={{
width: "fit-content",
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
// height: "fit-content",
// display: "flex",
// flexDirection: "row",
// alignItems: "center",
// justifyContent: "center",
userSelect: "none",
cursor: "pointer",
...clickable ? clickStyle : {},
...sx
}}>
<AcUnitIcon fontSize="large" sx={{ color: cyan[400], mr: 1 }}></AcUnitIcon>
<Typography variant='h4'>FrostByte</Typography>
...(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%" }}>
<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>
)
<Button
startIcon={typename === "Home" ? <HomeIcon /> : <PostAddIcon />}
key={typename}
sx={{ px: 2, bgcolor: "#FFFFFF15", width: 1 }}
>
{typename}
</Button>
);
})}
</ButtonGroup>
</Box>)
</Box>
);
}
export default Header;