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

220
client/src/Header.tsx
View file

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